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

^{（元素的顺序并不重要）}

更新

我需要'列'和它们最宽的'细胞'一样宽;我需要'行'和最高的'细胞'一样高;总之...一张桌子！没有“表格标题”：所有单元格都在同一级别上，分层次。

更新2

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

想一想更多关于它的东西，那里的东西需要比桌面布局模块更多的魔法，并且那是太神奇开始了！

一张图片，说千言万语：

^{（您可以忽略'单元格'中的无序列表）}

如何使用简单的HTML列表实现它。在这一点上，我想anwser是：你不会;但是让我们看看......

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>

Answer 2

使用flexbox简单：

• 允许弹性项目换行
• 每个项目的宽度为50％，每行强制两个

＆＃13;

＆＃13;

ul {
    display: flex;              /* establish flex container */
    flex-wrap: wrap;            /* enable flex items to wrap */
    padding: 0;                 /* remove default padding */
    list-style-type: none;      
}

li {
    flex: 0 0 50%;              /* don't grow, don't shrink, fixed width of 50% */
}

/* non-essential decorative styles */
li              { text-align: center;           }
li:nth-child(1) { background-color: lightgreen; }
li:nth-child(2) { background-color: lightblue;  }
li:nth-child(3) { background-color: lightpink;  }
li:nth-child(4) { background-color: lightgray;  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

flexbox的好处：

1. 最小代码;效率很高
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. 它的响应
6. 与花车和桌子不同，浮动和桌面提供有限的布局容量，因为它们从未用于建筑布局，因此flexbox是一种现代（CSS3）技术，具有广泛的选项。

要了解有关flexbox的更多信息，请访问：

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~MDN
• A Complete Guide to Flexbox ~CSS-Tricks
• What the Flexbox?! ~YouTube视频教程

浏览器支持：

所有主流浏览器except IE 8 & 9都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。 this answer中的更多详细信息。

Answer 3

你可以将li彼此相邻，这是解决方案

＆＃13;

＆＃13;

ul {
  margin:0; 
  padding:0;
  list-style-type: none;
  box-sizing: border-box;
}
li {
  width: 49%;
  float: left;
  border: 1px solid #000;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;