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

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

将“宽度”指定为 25% 显然可行，但这不是我想要的解决方案。有问题的菜单是动态创建的，并且有时会创建和删除新元素。

干杯

Answer 1

我认为你有三个选择:

1. 使用 JavaScript 计算尺寸

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

3. 如果您只针对新浏览器，您可以使用新的 flexible box 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;
   }