Нарисуйте элементы списка <li> чтобы заполнить ширину <ul>

У меня есть неупорядоченный список (<ul>) с различным количеством элементов (<li>) в нем. Я хочу использовать один стиль CSS, который позволяет элементам растягиваться до ширины списка.

Это то, что у меня есть:

enter image description here

Это то, что я хочу:

enter image description here

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. Примечание. Если вам интересно о прецеденте, это структура навигации в отзывчивом дизайне, и я хочу, чтобы элементы списка всегда заполняли доступную ширину независимо от разрешения.

Ответы

Ответ 1

Демо HI теперь вы можете это сделать

Используется для display :table и display:table-cell

как этот

Css

ul {
    border:1px dotted black;
    padding: 0;
    display:table;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
li {
    background-color: red;
    display:table-cell;
}
li:nth-child(2n) {
    background-color: #0F0;
}

Теперь определите родителя display:table; или width:100%; и определите своего ребенка display:table-cell;

Демо

Ответ 2

У меня есть самое простое решение. <ul style="padding: 0;"> <li style="list-style-type: none;margin:0;"></li> </ul>

Ответ 3

Вы можете установить их ширину как относительную (например, процентную). Вы можете создавать классы css, например:

.li2Elem{width:50%}
.li3Elem{width:33.3%}
.li4Elem{width:25%}
.li5Elem{width:20%}

и т.д.