css - 显示 : table-cell with multiple rows (equal height columns, 多行)

Question

给定一个列表:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

还有这个 CSS:

ul { display: table; width: 600px; }
li { display: table-cell; width: 33%; }

您希望有 3 行 3 列，每行 200 像素左右宽。但似乎 li 宽度被忽略了。

有没有办法在不添加额外标记的情况下强制使用 display: table-cell 行？

编辑:此外，我正在使用 table-cell 因为我希望整行具有相同的高度(尽管内容不同)，因为我想在每一行的所有三个单元格中放置一些东西，但在最低单元格的底部。我知道这是一个令人困惑的句子。

基本上我想将一堆 li 变成等高的列，但多行仅使用 CSS。我见过的所有等高柱解决方案都不能做到这一点。

Answer 1

您可以将 display:inline-table 代替 display:table-cell 给 LI。像这样写:

ul { display: table; width: 600px; font-size:0;}
li { display: inline-table; width: 33%;background:red; font-size:15px;}

检查这个http://jsfiddle.net/56FGT/1/