Stretch-Liste, die Elemente <li> zum füllen der Breite <ul>

Habe ich eine ungeordnete Liste (<ul>) mit verschiedenen Anzahl von items ( <li> ). Ich will ein CSS-styling, das erlaubt, die Elemente zu Strecken, um die Breite der Liste.

Dies ist, was ich habe:

Stretch-Liste, die Elemente <li> zum füllen der Breite <ul>

Dies ist, was ich will:

Stretch-Liste, die Elemente <li> zum füllen der Breite <ul>

HTML:

These 4 items should fill the width:<br/>
<ul id="ul1">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
These 5 items should fill the width:<br/>
<ul id="ul2">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
And so on and so forth...

Hier ist die JSFiddleum Ihnen den Einstieg.

Hinweis: ich möchte nicht hard-code width in CSS.
Hinweis: Wenn Sie sich Fragen, über die use-case, dies ist eine Navigationsstruktur in einem responsive design erstellt und ich will die Liste mit Elementen zu füllen immer die verfügbare Breite, egal welche Auflösung.

InformationsquelleAutor der Frage AlexStack | 2012-11-15

Schreibe einen Kommentar