显示:新行上的表格单元格

Question

这是我的意思的示例代码:

HTML

<ul class="table">
  <li class="table-cell"></li>
  <li class="table-cell"></li>
  <li class="table-cell"></li>
  <li class="table-cell"></li>
</ul>

CSS:

.table {
  display: table;
}

.table-cell {
  display: table-cell;
  width: 25%;
}

问:如何<li>在宽度为50%的新行上显示第三个和第四个(表格单元格)？

问:有没有办法只使用CSS而不是jQuery或Javascript？

Answer 1

简单的答案是:你不能,至少不能用列表.显示设置为的相邻元素table-cell被视为属于同一行(即使未提供行元素,也会为您创建一个匿名元素).由于列表不允许在ul和li之间包含任何其他标记,因此列表无法实现.您将不得不使用不同的标记或不同的样式.

如果您不想修改标记,可以选择以下选项.

列表项上的内联块:http: //jsfiddle.net/XNq74/1/

li {
    display: inline-block; /* could use floats here instead */
    width: 40%;
}

CSS列将是一个合理的选择:http: //jsfiddle.net/XNq74/

ul {
    columns: 2;
}

http://caniuse.com/#feat=multicolumn

Flexbox也可以使用,可以与内联块结合使用:http: //jsfiddle.net/XNq74/2/

ul {
    display: flex;
    flex-flow: row wrap;
}

li {
    flex: 1 1 40%;
}

http://caniuse.com/#search=flexbox