从简单的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>

^{(元素的顺序并不重要)}

UPDATE

我需要'列'和它们最宽的'细胞'一样宽; 我需要'行'和最高的'细胞'一样高; 总之...一张桌子!没有"表头":所有单元格在同一级别上,分层次.

更新2

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

想想更多关于它的东西,那里的东西需要比桌面布局模块更多的魔法,这太开始了!

一张图片,说千言万语:

^{(你可以忽略'细胞'里面的无序列表)}

如何只用一个简单的HTML列表来实现它.在这一点上,我猜测的是:你不会 ; 但是让我们看看......

Answer 1

一种简单的方法是在li元素上使用浮点数.您可以在下面找到一个可以编辑以满足您需求的示例.

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>