Horizontale Navigationen mit Listen

Für Navigationen werden oft die HTML Listen-Tags <ol> und <ul> verwendet. Standardmäßig haben diese Listen einen vertikalen Aufbau, so dass die Listen-Elemente <li> untereinander angeordnet sind. Für eine horizontale Navigation braucht man aber einen waagerechten Aufbau.

Im Folgenden zeige ich, wie man dieses Layout mit CSS einstellen kann.

Code-Beispiel:

In meinem Code-Beispiel zeige ich, wie man ganz einfach eine Liste mit horizontalen Listen-Elementen aufbaut, welche mindestens 100 Pixel breit sind.

Liste:

1
2
3
4
5

<ul>
	<li><a href="#">Eins</a></li>
	<li><a href="#">Zwei</a></li>
	<li><a href="#">Drei</a></li>
</ul>

CSS-Stil:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ul li
{	
	float: left;
	display: inline;
	list-style-type: none;
}
 
ul li a
{
	display: block;
	min-width: 100px;
	/* IE6 min-width Hack */
	width: auto !important;
	width: 100px;
}