У меня есть неупорядоченный список (<ul>
) с различным количеством элементов (<li>
) в нем. Я хочу использовать один стиль CSS, который позволяет элементам растягиваться до ширины списка.
Это то, что у меня есть:
Это то, что я хочу:
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...
Вот вам JSFiddle, чтобы вы начали.
Примечание. Я не хочу жестко кодировать width
в CSS.
Примечание. Если вам интересно о прецеденте, это структура навигации в отзывчивом дизайне, и я хочу, чтобы элементы списка всегда заполняли доступную ширину независимо от разрешения.