从简单的HTML列表开始，使用CSS创建类似表格的网格

CSS中是否有任何方法可以创建以下内容：

-----------------------------------
| lorem ipsum dolor | consectetur |
| sit amet          |             |
-----------------------------------
| adipiscing        | elit        |
-----------------------------------

由此：

lorem ipsum dolor sit amet
圣骑士
告别
精英

（元素的顺序没有那么重要）

更新

我需要“列”与最宽的“单元”一样宽；我需要“排”和他们最高的“牢房”一样高；简言之一张桌子！没有“表头”：所有单元格都在同一级别上，层次结构相同

更新2

类似于：第一个虚拟行上的每个单元格（即换行前的每个单元格）根据其内容填充所有可用空间；后续行由与第一行相同数量的每行单元格组成。每一列的宽度仍然与其最宽的单元格相同，而不增加第一行建立的列数

再仔细想想，上面的东西需要比表格布局模块更神奇的东西，这太神奇了

一幅画，可以说是千言万语：

（您可以忽略“单元格”中的无序列表）

---

您将如何使用一个简单的HTML列表来实现它。在这一点上，我想答案是：你不会；但是让我们看看…

一个简单的方法是在

li

元素上使用浮动。下面是一个可以根据需要进行编辑的示例

ul{
宽度：500px；
}
李{
宽度：50%；
浮动：左；
边框：1px实心#000；
保证金：0；
列表样式类型：无；
框大小：边框框；
}
李：第n个孩子（单数）{
清除：左；
}

同侧阴唇
坐阿梅特
福
酒吧

您可以将li浮动在彼此旁边，下面是解决方案

ul{
保证金：0；
填充：0；
列表样式类型：无；
框大小：边框框；
}
李{
宽度：49%；
浮动：左；
边框：1px实心#000；
}

同侧阴唇
坐阿梅特
福
酒吧
同侧阴唇
坐阿梅特
福
酒吧

使用flexbox时非常简单：

• 允许弹性项目包装
• 给每个项目50%的宽度，强制每行两个

ul{
显示：flex；/*建立flex容器*/
灵活包装：包装；/*启用灵活项目包装*/
填充：0；/*删除默认填充*/
列表样式类型：无；
}
李{
弹性：0 0 50%；/*不增长，不收缩，固定宽度为50%*/
}
/*非基本装饰风格*/
li{文本对齐：居中；}
li:n子（1）{背景色：浅绿色；}
li:n子（2）{背景色：浅蓝色；}
李：第n个孩子（3）{背景色：浅粉色；}
li:n子（4）{背景色：浅灰色；}

同侧阴唇
坐阿梅特
福
酒吧

如果是表格内容，请使用表格。我宁愿使用dl、dt和dd而不是ul和li。@SalmanA标记只是一个例子，说明我不能在其中添加任何行（即非

li

元素）。从语义上讲，所有元素都应该是单元格，所以在我看来，它们共享相同的元素类型（

li

）才是正确的。谢谢你的回答。唉，这不是我要找的：我需要的是栏目的宽度和内容一样宽；且不得具有任意宽度（例如50%）。我正在更新我的问题，使之更清楚。这将不可能单独使用CSS，因为兄弟元素不知道彼此的大小。因此，使用“自动调整宽度”无法使第三个

li

与第一个一样宽。请参阅演示，了解这是什么样子。太快了！：）是的，我就是这么想的；您需要物理行才能在那里。。。我知道有一个网格css布局模块，你知道其中是否包含类似的内容吗？网格（即使是灵活的网格）也至少依赖于相对宽度，因此仍然不可能自动调整列的大小。另一种方法是使用一些javascript，获取所有奇怪的

li

元素，找到文本最长的，然后将所有奇数

li

设置为该宽度。谢谢您的回答。我知道flexbox，我尝试了它的许多组合，但我没能实现我想要的。我正在更新我的问题以使其更清楚。出于好奇：我读到了，但在您看来，使用

flex basis

而不是

width

的主要优点是什么？事实上，这只在主轴上起作用？我的一般规则是总是对在某种程度上对我有用的答案进行投票。我不断地更新那些教给我新东西的答案。然而，除非答案完全回答了我的问题，否则我不会接受（勾选）答案。然后我会投票支持你的答案，因为它肯定是有用的，而且做得很好！；）有关投票的其他意见，请参阅和。