Question

我想使用UL元素的全宽度来浮动LI元素。使用％-values填充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结束。

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

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

增加浮动元素以适应内部

1 个答案: