Horizontale Navigation gleichmäßig über die Breite verteilen

Aktuelle Programmier- und Auszeichnungssprachen HTML / CSS / JavaScript
1

Ich bastle gerade an einer Navigation (HTML), die ich mit CSS stylen möchte.
Die Listenelemente einer unsortierten Liste (derzeit 6) sollen sich dabei horizontal über die gesamte verfügbare Breite gleichmäßig verteilen.

Im Netz habe ich Beispiele gefunden, die entweder bei mir nicht funktionieren wollten, oder mir vom Stil (üble Work arounds) her nicht gefallen haben.
Hat das jemand von euch schon mal gemacht? Würde mich freuen, wenn jemand ein funktionierendes Beispiel posten könnte.

2

Sowas?

<html>
   <head>
   </head>
   <body>
      <table width=100%>
         <td align=center>Hallo</td>
         <td align=center>Welt</td>
         <td align=center>wie</td>
         <td align=center>gehts?</td>
      </table>
   </body>
</html>
3

Bleiben es 6 Stück? Wenn ja, wäre das mein Vorschlag:

<html>
	<head>
		<style type="text/css">
			#menu {
				border: 1px solid black;
				overflow-y: hidden;
				width: 100%;
			}
			
			#menu ul {
				border: 0px;
				padding: 0px;
				margin: 0px;
			}
			
			#menu li {
				float: left;
				width: 16.66%;
				text-align: center;
			}
		</style>
	</head>
	<body>
	<div id="menu">
		<ul>
			<li>Link 1</li>
			<li>Link 2</li>
			<li>Link 3</li>
			<li>Link 4</li>
			<li>Link 5</li>			
			<li>Link 6</li>
		</ul>
	</div>
	</body>
</html>

Gerade nur flott mit Chrome und FF getestet. Bei dynamischer Link-Anzahl funktioniert das natürlich nicht.

Gruß,
Tim

4

@bERt0r , ich habe bewusst versucht, ohne Tabellen auszukommen.
@inv_zim , danke, deine Lösung funktioniert bei mir auch.

Ich habe heute morgen noch eine Lösung bauen können, die auch unabhängig von der Anzahl der Listenelemente ist. Kann das mal jemand testen und vielleicht noch eine Meinung posten?


<html>
    <head>
        <style type="text/css">
            #wrapper {
                border: 1px solid black;
            }            

            #wrapper ul {
				margin: 0;
				padding: 0;
            }            

            #wrapper li {
				width: 1%;
				display: table-cell;
				text-align: center;
				margin: 0;
				padding: 0;				
            }
        </style>
    </head>
    <body>
		<div id="wrapper">
			<ul>
				<li><a href="link1.html">Link 1</a></li>
				<li><a href="link2.html">Link 2</a></li>
				<li><a href="link3.html">Link 3</a></li>
				<li><a href="link4.html">Link 4</a></li>
				<li><a href="link5.html">Link 5</a></li>
				<li><a href="link6.html">Link 6</a></li>
			</ul>
		</div>
    </body>
</html>
5

Schöne Lösung, die muss ich mir merken! Ich bin mir noch nicht so ganz sicher, was da passiert, aber das schaue ich mir heute Abend mal Daheim an.
Die Lösung funktioniert bei mir mit Windows 7 unter Chrome und FF. IE9 mag das nicht so recht, da stehen die Listenelemente untereinander.

6

Dann muss da wohl ein display: inline; bzw. ein display: inline-block; wieder rein.

*** Edit ***


<html>
    <head>
        <style type="text/css">
            #wrapper {
                border: 1px solid black;
            }            

            #wrapper ul {
				margin: 0;
				padding: 0;
				text-align: justify;
            }            

            #wrapper li {
				display: inline-block;			
            }
			
			#line { padding-left: 100%; }
        </style>
    </head>
    <body>
		<div id="wrapper">
			<ul>
				<li><a href="link1.html">Link 1</a></li>
				<li><a href="link2.html">Link 2</a></li>
				<li><a href="link3.html">Link 3</a></li>
				<li><a href="link4.html">Link 4</a></li>
				<li><a href="link5.html">Link 5</a></li>
				<li><a href="link6.html">Link 6</a></li>
				<li id="line"></li>
			</ul>
		</div>
    </body>
</html>