13

给定一个列表：

<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是因为我希望整行具有相同的高度（尽管内容不同），因为我想在每行的所有三个单元格中放置一些东西，但在最低单元格的底部。我知道这是一个令人困惑的句子。

基本上我想把一堆lis 变成等高的列，但多行只使用 CSS。我见过的所有等高柱解决方案都无法做到这一点。

4

6 回答 6

13

你可以给display:inline-table而不是display:table-cell给李。像这样写：

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

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

于 2012-05-15T07:03:57.717 回答
3

这是我想出的解决方案。

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

于 2012-05-17T00:31:00.897 回答
3

如果您希望 css<li>在同一行中显示 3 个宽度，每个宽度200px相同<ul>，您可以使用上面的 html 尝试这样的操作：

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

演示

于 2012-05-15T07:03:22.523 回答
1

我认为没有语义解决方案。它应该是每组项目的包装容器，以对其应用相同的高度。但是有可能解决设计问题（有点做一个网格）这里是一个如何制作它的例子：一行上具有相同高度的多行

于 2012-09-10T16:01:22.013 回答
1

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

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

于 2013-04-01T18:34:30.063 回答
0

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

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

编辑：
如果您知道内容的最大高度是多少，您当然可以将其用作所有列表项的高度，并使用 vertical-align 或 line-height 来对齐内容。（但由于这也不是一种选择，所以不改变标记的解决方案已经过时了。）

于 2012-05-15T07:03:11.640 回答