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

Question

在 CSS 中是否有任何方法来创建它:

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

来自这里:

<ul>
  <li>lorem ipsum dolor sit amet</li>
  <li>consectetur</li>
  <li>adipiscing</li>
  <li>elit</li>
</ul>

^{(元素的顺序不是那么重要)}

更新

我需要“列”与其最宽的“单元格”一样宽；我需要“行”与它们最高的“单元格”一样高；简而言之……一张 table !没有“表格标题”:所有单元格都在同一层次上。

更新 2

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

再想一想，上面的东西需要比表格布局模块更多的魔力，而这太魔力了!

一张图，说一千句话:

^{(您可以忽略“单元格”内的无序列表)}

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

Answer 1

一种简单的方法是在 li 元素上使用 float 。您将在下面找到一个示例，您可以对其进行编辑以满足您的需要。

ul {
  width: 500px;
}
li {
  width: 50%;
  float: left;
  border: 1px solid #000;
  margin: 0;
  list-style-type: none;
  box-sizing: border-box;
}
li:nth-child(odd) {
  clear: left;
}

<ul>
  <li>lorem ipsum dolor</li>
  <li>sit amet</li>
  <li>foo</li>
  <li>bar</li>
</ul>