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

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

将“宽度”指定为 25% 显然可以工作，但这不是我想要的解决方案。相关菜单是动态创建的，并且有时会创建和删除新项目。

Cheers

我认为你有三个选择：

1. 使用 JavaScript 计算尺寸

2. 使用表格，如中讨论的这个问题 https://stackoverflow.com/questions/674045/distribute-elements-evenly-using-css（这实际上不是一个坏选择——它是纯 HTML 和 CSS

3. 如果您只针对新浏览器，则可以使用新的柔性盒 http://dev.w3.org/csswg/css3-flexbox/CSS 组件（此处显示带有几个供应商前缀）：

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