使无序列表跨越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. 使用表格,如本问题所述(这实际上并不是一个糟糕的选择 - 它是纯HTML和CSS

3. 如果您只定位新浏览器,则可以使用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;
   }