小编wc.*_*teo的帖子

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

在CSS中有什么方法可以创建它:

-----------------------------------
| lorem ipsum dolor | consectetur |
| sit amet          |             |
-----------------------------------
| adipiscing        | elit        |
-----------------------------------
Run Code Online (Sandbox Code Playgroud)

由此:

<ul>
  <li>lorem ipsum dolor sit amet</li>
  <li>consectetur</li>
  <li>adipiscing</li>
  <li>elit</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

(元素的顺序并不重要)

UPDATE

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

更新2

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

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

一张图片,说千言万语:

表格式网格

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

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

html css css3 grid-layout flexbox

4
推荐指数
1
解决办法
1956
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

grid-layout ×1

html ×1