css - 使无序列表水平拉伸以始终填满 div

Question

对不起，我以为这个问题已经解决了，但结果却没有。

我在 div 中有一个无序列表，我希望列表始终水平填充整个 div，无论缩放级别如何。怎么办？单独设置每个列表项的宽度？我试过这个，我的项目的宽度加起来是 100%，但列表仍然没有填满 div。我也在修改一个模板，很多 HTML 对我来说是隐藏的，但我可以随意编辑 CSS。在 CSS 方面我还能做什么？填充？涉及到 calc 函数的东西？我已经尝试了所有这些，但不知何故似乎没有任何效果。

关于如何做到这一点，还有其他想法吗？

Answer 1

尝试这个

 ul { padding:0; margin:0; white-space:nowrap; }
 li { width: 100%; list-style-type:none; display:inline-block; }

或者

ul {
  width: 100%;
  display: table;
  table-layout: fixed;
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}

Answer 2

浏览器支持有点不确定，但如果您希望列表项始终占据其容器的整个宽度，您可以将display: table和display: table-cell与您的列表项结合使用：

ul {
    display: table;
}

li {
    display: table-cell;
}

Answer 3

你可以试试这个HTML：

<ul>
    <li>first list</li>
    <li>Second</li>
    <li>Third list</li>
    <li>Fourth</li>
</ul>

CSS：

body {
    border: 1px dashed #CCC;   
    margin: 5px;
    min-height:400px;
}
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul {
    width: 100%;
}
li {
    float: left;
    width: 25%;  
    text-align:center;
}

检查这个小提琴：http: //jsfiddle.net/Kritika/tfSSe/