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

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。

注意：我不想hard-code the width in CSS。 注意：如果您想知道用例，这是响应式设计中的导航结构，我希望列表项总是填满可用的宽度，无论分辨率是多少。

Answer 1

<强> Demo 你现在可以这样做

用于 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;

<强> Demo

Answer 2

使用

轻松解决问题

ul {
    display: flex;
}

ul li {
    width: 100%;
}

Answer 3

最简单的方法：

pathname

有关 ul { display: flex; } ul li { /*this instruction means "To split space between all 'li' elements evenly*/ flex: 1; } 属性的更多详细信息，您可以阅读 here。

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%
}

注意：显示可以是内联块，宽度为：100％，此代码适用于那些希望以明智方式排列li的人。