Question

对此我很抱歉，我认为这个问题已经解决，但结果证明事实并非如此。

我在div中有一个无序列表，我希望列表始终水平填充整个div，无论缩放级别如何。怎么会这样呢？分别设置每个列表项的宽度？我试过这个，我的项目的宽度确实加起来100％，但列表仍然没有填满div。我也正在修改模板，因为我隐藏了很多HTML，但我可以编辑所有想要的CSS。在CSS方面我还能做些什么？填充？涉及计算功能的东西？我已经尝试了所有这些，但似乎没什么用。

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

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

浏览器支持is a bit iffy，但如果您希望列表项始终占据其容器的整个宽度，you can use a combination of display: table and display: table-cell with your list items：

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/

使无序列表水平拉伸，以便始终填充div

3 个答案: