So verteilen Sie HTML-Listenelemente gleichmäßig in einer ungeordneten Liste

Question

Ich möchte meine li Elemente, die ein horizontales Menü bilden, gleichmäßig über die Breite meines Elements ul verteilen. Ich normalerweise float meine li Elemente auf der linken Seite und fügen Sie etwas Marge hinzu. Aber wie stelle ich den richtigen Abstand, so dass sie von der linken Seite meines ul Elements bis zur rechten Kante reichen?

Hier ist an example jsfiddle of a menu not distributed über die ul.

Der Abstand muss zwischen jedem li gleich sein. Aber die li Elemente können unterschiedliche Längen haben.

Answer 1

Noch ein anderer Ansatz. Dies ist etwas, das ich benutze, wenn ich versuche, ein Menü gleichmäßig über die Seite zu verteilen. Es ist nett, wenn Sie ein dynamisches Menü haben, das sich abhängig von bestimmten Bedingungen ändert (wie eine Admin-Seite, die nur angezeigt wird, wenn Sie als Administrator angemeldet sind).

CSS:

nav div ul { 
display: table; 
width: 100%; 
list-style: none; 
} 
nav div ul li { 
display: table-cell; 
text-align: center; 
} 
nav div ul li a { 
display: block; 
} 

war ich ein bisschen faul, und nur kopiert diese aus meinem aktuellen Projekt, so dass Sie es anpassen müssen Ihren Code passen, aber es ist meine bevorzugte Methode zur Herstellung eines horizontalen Menü Erstellen

EDIT: Sie können es so aussehen, wie es besser umspannt, indem Sie diesen:

CSS:

nav div ul li:first-child { 
    text-align: left; 
} 
nav div ul li:last-child { 
    text-align: right; 
} 

erneut, ungetestet, nur getippt.

Answer 2

Ich verstehe Ihre Frage nicht eindeutig, so ging ich davon aus, dass Sie dies wünschen können:

li { 
    border:solid 1px red; 
    clear:both; 
    display:block; 
    float: left; 
    margin: 5px; 
    width:100%; 
} 
ul { 
    text-align: center; 
    width:300px; 
} 

Answer 3

Sie verlassen nun die Breite der li-Elemente setzen müssen, um sie zu zwingen, den Raum zu füllen:

ul { 
    width: 100%; 
} 
li { 
    float: left; 
    width: 33%; 
} 

(Fiddle demo)

Wenn Sie weitere Elemente in die Liste hinzuzufügen, müssen Sie die prozentuale Breite anpassen - zB mit vier Einzelteilen, die Breite 25% betragen.

Answer 4

Ich habe zwei Antworten für Sie.

Wenn Sie mit dem float Modell haften mögen:

Ihr ul Element muss die Überlauf-Eigenschaft festgelegt haben (ohne diese Eigenschaft Ihre ul (oder jedes Element Floats), die eine Höhe nicht gegeben ist (Dies ist das erwartete Verhalten, wohlgemerkt: http://www.quirksmode.org/css/clearing.html) und wird daher standardmäßig auf eine Höhe von 0 - der Effekt wird sein, dass, wenn Sie verschiedene Hintergrundfarben für Ihre ul/li und Körper setzen, der Hintergrund Ihrer ul wird nicht scheinen anzeigen).

ul { 
    text-align: center; 
    width: 300px; 
    overflow: auto; 
} 

Ihre li Elemente benötigen Breiten Set haben, sonst - als Floats - ihre Breite wird festgelegt werden, was auch immer sie enthalten. Ich habe unten Pixel verwendet, aber Sie können auch einen Prozentwert verwenden.

li { 
    float: left; 
    margin: 5px 0 5px 0; 
    width: 100px; 
    text-align: center; 
} 

Verwenden Sie die display:inline-block Eigenschaft für Ihre li Elemente (wenn die Unterstützung für ältere Browser keine Priorität). IE 7 unterstützt dies nicht, daher ist es nicht hilfreich, wenn Sie umfangreiche browserübergreifende Unterstützung benötigen, aber es erzeugt den gewünschten Effekt. Stellen Sie jedoch sicher, dass Sie alle Leerzeichen zwischen Ihren Tags </li> und <li> löschen Gesamtbreite und wird als Leerzeichen zwischen den Elementen angezeigt.

Ein Vorteil, dass diese Methode hat, ist, dass Sie müssen nicht wissen, oder die Breite des Behälters ul einstellen, wenn Sie Prozentbreiten auf Ihren enthaltenen li Elemente verwenden, erhalten Sie noch die Zentrierung kostenlos mit dem text-align Eigentum, das Sie bereits haben. Dies macht Ihr Layout sehr reaktionsschnell.

Hier Markup und CSS, die so funktioniert, ich glaube, Sie fordern:

Markup:

<ul> 
<li>banana</li><li>orange</li><li>apple</li> 
</ul> 

CSS:

li { 
    display:inline-block; 
    margin:5px 0 5px 0; 
    width:33.33%; 
} 
ul { 
    text-align: center; 
} 

• Wenn Sie lieber das Markup halten würde in mehreren Zeilen, dann müssen Sie mit den linken und rechten Rändern Ihrer li Elemente in der CSS fiedeln.
• Wenn Sie li Elemente hinzufügen, müssen Sie die prozentuale Breite ändern, damit sie übereinstimmen (zum Beispiel mit vier li Elementen in Ihrem Markup, müssten Sie Ihr CSS so ändern, dass es eine Breite von 25% hat).