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:
Dies ist, was ich will:
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Demo
HI jetzt können Sie diese
Verwendet, um
display :table
unddisplay:table-cell
als wie diese
Css
Definieren Sie nun Ihre Eltern
display:table;
oderwidth:100%;
und definieren Sie Ihr Kinddisplay:table-cell;
Demo
InformationsquelleAutor der Antwort Rohit Azad
Einfache Lösung mit
InformationsquelleAutor der Antwort Victor Nolêto
Habe ich die einfachste Lösung.
<ul style="padding: 0;">
<li style="list-style-type: none;margin:0;"></li>
</ul>
InformationsquelleAutor der Antwort irejwanul
Hinweis: display inline-block, width:100% und dieser code ist für diejenigen, die suchen, zu ordnen li, blockweise.
InformationsquelleAutor der Antwort UBS prakash