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

Answer 2

ul.table li+li+li { /** your CSS code **/ } This one is for the third element


ul.table li.last { /** your CSS code **/ }   This one is for the fourth element

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

2 个答案: