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列，每行200px-ish。但似乎忽略li宽度。

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

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

基本上我想将一堆li s变成相等的高度列，但是多行只使用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/

Answer 2

如果您希望css在同一<li>中的每个宽度为200px的行中显示3 <ul>，您可以使用上面的html尝试类似的内容：

ul { list-style: none outside none; width: 600px; }
li { float: left;display: block;width: 200px; height: 33px; }

Demo

Answer 3

我想出了

This is the解决方案。

略微修改标记，以删除空格。这是因为li设置为display: inline时，它们之间的换行符将占用一些宽度。

Answer 4

我认为没有语义解决方案。它应该是每个项目集的包装容器，以应用相同的高度。但它可以解决设计问题（有点制作网格）以下是如何制作它的示例：multiple rows with same height on a line

Answer 5

我正在使用display: inline-block和vertical-align: top

但如果你想要高度延伸的背景，javascript是唯一的方式（我能想到的）

Answer 6

如果您无法更改标记，则可以在不伪造表的情况下完成。您可以制作列表项display:block而不是display:table-cell。

顺便说一句，33％的600px不是200像素。使用200px！

编辑：
如果您知道内容的最大高度，您可以将其用作所有列表项的高度，并使用vertical-align或line-height来对齐内容。（但由于这也不是一个选项，因此不会改变标记的解决方案。）

display：具有多行的表格单元格（高度相等的列，多行）

6 个答案:

Demo