拉伸列表项<li>以填充<ul>的宽度

Question

我有一个无序列表(<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.

注意:我不想在CSS中硬编码width.注意:如果您想知道用例,这是响应式设计中的导航结构,我希望列表项始终填满可用宽度,无论分辨率是多少.

Answer 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;

演示

Answer 2

轻松解决

ul {
    display: flex;
}

ul li {
    width: 100%;
}

Answer 3

最简单的方法：

ul {
    display: flex;
}

ul li {
    /*this instruction means "To split space between all 'li' elements evenly*/
    flex: 1;
}

有关财产的更多详细信息，您可以在此处flex阅读。