css - 拉伸列表项填充宽度

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

演示 嗨现在你可以做到这一点

习惯 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您可以在此处阅读有关属性的更多详细信息。

Answer 4

我有最简单的解决方案。 <ul style="padding: 0;"> <li style="list-style-type: none;margin:0;"></li> </ul>

Answer 5

#ul1 {
display: block;
padding: 0;
list-style: none;
}

li-Class{
width: 100%
}

注意： display 可以是 inline-block 宽度：100% 并且此代码适用于那些希望安排 li 块的人。