使无序列表跨越div的宽度100％

Question

<div>
  <ul>
    <li>First</l1>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>


div {
  width: 100%;
}
li {
  list-style: none;
  float: left;
}

使用CSS，有没有办法让LI标签自动填充父div的整个宽度？所以他们每人占25％。

将'width'指定为25％显然会有效，但这不是我追求的解决方案。有问题的菜单是动态创建的，有时会创建和删除新项目。

干杯

Answer 1

我认为你有三种选择：

1. 使用JavaScript计算尺寸

2. 使用表格，如this question中所述（这实际上不是一个糟糕的选择 - 它是纯HTML和CSS

3. 如果您只定位新浏览器，则可以使用CSS的新flexible box组件（此处显示的是几个供应商前缀）：

   ul{
       padding: 0;
       display: -webkit-box;
       display: -moz-box;
       display: box;
   }
   li{
       list-style: none;
       list-style:none;
       text-align: center;
       -webkit-box-flex: 1;
       -moz-box-flex: 1;
       box-flex: 1;
   }
   

Answer 2

ul{
  display:block;
  margin:0;
  padding:0;
}

li{
  display:block;
  width:25%;
  margin:0;
  padding:0;
  float:left;
  list-style:none;
}

Answer 3

在我的一段时间的搜索中，我没有遇到任何可以动态指定列表项宽度的内容。如果您还询问如何将列表设置为水平而不是垂直，请使用：

li {
  display: inline;
  float: left;
}