Css 扩展列表项<；李>；填充<；ul>；

我有一个无序列表（

），其中包含不同数量的项目（

）。我想使用一个CSS样式，允许项目延伸到列表的宽度

这就是我所拥有的：

这就是我想要的：

HTML:

这4个项目应填充宽度：


项目
项目
项目
项目



这5个项目应填充宽度：


项目
项目
项目
项目
项目



诸如此类。。。

这是让你开始的方法

注意：我不想。 注意：如果您想知道这个用例，这是一个响应性设计中的导航结构，我希望列表项始终填充可用宽度，无论分辨率如何。

嗨，现在你能做到了

用于

显示：表格

和

显示：表格单元格

像这样

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

现在定义父项

显示：表格或<代码>宽度：100%

和定义您的孩子

显示：表格单元格

我得到了最简单的解决方案。


使用

ul {
    display: flex;
}

ul li {
    width: 100%;
}

注意：显示可以是宽度为100%的内联块，此代码适用于希望按块排列li的用户。
最简单的方法：

ul{
显示器：flex；
}
ulli{
/*本说明的意思是“在所有“li”元素之间平均分割空间*/
弹性：1；
}

关于您可以阅读的
flex
属性的更多详细信息。
很好，跨浏览器兼容性如何？但是如果您的列表项有不同的长单词，那么这看起来真的很难看。您可以在答案中添加一些解释吗？只显示代码可能会让人困惑。此解决方案比公认的答案更好
ul {
    display: flex;
}

ul li {
    width: 100%;
}

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

li-Class{
width: 100%
}