Css 显示：具有多行的表格单元格（等高列、多行）

给出一个列表：

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

您会期望3行3列，每行200像素宽。但似乎忽略了

li

宽度

是否有任何方法可以在不添加额外标记的情况下强制使用

display:table cell

的行

编辑： 另外，我使用的是

表格单元格

，因为我希望整行具有相同的高度（尽管内容不同），因为我希望在每行的所有三个单元格中都放置一些内容，但要放在最低单元格的底部。我知道那是一个令人困惑的句子

---

基本上，我想将一堆

li

s转换为高度相等的列，但多行只使用CSS。我见过的所有等高列解决方案都无法做到这一点。

如果无法更改标记，则可以在不伪造表格的情况下完成。您可以使列表项

display:block

而不是

display:table cell

顺便说一下，

600px

的33%不是200像素。使用

200px

编辑：

---

如果您知道内容的最大高度，当然可以将其用作所有列表项的高度，并使用垂直对齐或线条高度对齐内容。（但由于这也不是一个选项，不改变标记的解决方案已经过时了。）

如果您希望css在同一

中一行显示3个
s，每个宽度
200px
，您可以在上面的html中尝试类似的方法：

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

您可以将
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;}

检查我想出的这个解决方案

稍微修改标记，以删除空白。这是因为
li
s设置为
display:inline
，它们之间的换行将占据部分宽度。
我认为没有语义解决方案。它应该是每一组项目的包装容器，以便对它们应用相同的高度。但解决设计问题是可能的（有点像网格）
下面是一个示例：我正在使用
display:inline block
和
vertical align:top

但是如果你想让背景也随着高度延伸，javascript是唯一的方法（我能想到）
我没有看到多行，我看到一行有9个单元格。那么，如果你想要一张桌子，为什么不使用桌子呢？或者，如果您确实希望最小化标记，请使用
而不是
（这样您就可以省去
），并为它们提供
显示：内联块。完全正确。这也是我得到的。我需要多行，无法编辑标记，因此无法使用表。如果您有无法更改标记等限制，您应该在问题中始终这样说。这将大大减少错误答案的数量。使用浮动是最跨浏览器的方式（适用于所有支持CSS的浏览器），而且非常简单。请记住在
ul
元素之后的第一个元素上使用
clear
，以防止其他内容出现在最后一项的右侧。根据我的编辑，我需要使用
表格单元格
，因为我希望行中的所有单元格都具有相同的高度。@cainmi，您事先不知道每个单元格的内容将有多高？@MrLister否，可变内容。@cainmi那么恐怕您必须使用Javascript将内容更改为真实的表格。否则，我还没有找到一种方法来拥有表格单元格的垂直对齐功能并同时将其分成三行。根据我的编辑，我需要使用
表格单元格
，因为我希望行中的所有单元格都具有相同的高度。根据我的编辑，我需要使用
表格单元格
，因为我希望行中的所有单元格具有相同的高度。如何获得全高背景？
ul { display: table; width: 600px; font-size:0;}
li { display: inline-table; width: 33%;background:red; font-size:15px;}