让浮动元素自适应容器大小

Question

我希望浮动的LI元素能够使用UL元素的整个宽度。使用LI元素的百分比填充值是否可能实现此目的？由于内容长度不同，我无法为LI元素使用固定宽度。

这是我的HTML代码：

<ul>
    <li>January</li>
    <li>February</li>
    <li>March</li>
    <li>April</li>
    <li>May</li>
    <li>June</li>
    <li>...</li>
</ul>

以下是我的CSS代码：

ul {
    overflow: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 600px;
    background-color: blue;
}

li {
    float: left;
    padding-left: 3%;
    padding-right: 3%;
    background-color: #dd0000;
    border-left: 1px solid #ffffff;
}

li:hover {
    background-color: #ff0000;
}

你可以在JsFiddle上查看示例：http://jsfiddle.net/6Uy4y/ 即使更改UL的宽度，红色LI元素也应该在蓝色UL结束的地方结束。

感谢您指引我正确的方向！

- chris

Answer 1

看起来这是表格数据的开始。我会使用 <table> 标签。如果我误解了，你可以用 CSS 模拟一个表格。

ul {
  display: table;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

li {
  display: table-cell;
  padding: 0 3%;
}

这是一个快速的小演示：http://jsbin.com/iwacum/1/edit。

- Bill Criswell