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

Here is an example code for what I mean:

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

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:

CSS：

.table {
  display: table;
}

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

Q: How can I make the third and forth <li> (table cells) display on new row with width: 50% each?

问：如何在宽度为50％的新行上显示第三个和第四个

（表格单元格）？

Q: Is there a way using only CSS and not jQuery or Javascript?

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

2 个解决方案

#1

The simple answer is: you can't, at least not with lists. Adjacent elements with their display set to table-cell are treated as belonging to the same row (even if a row element is not provided, an anonymous one will be created for you). Since lists aren't allowed to contain any other tags between the ul and the li, this simply isn't possible with lists. You'll have to use either different markup or different styling.

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

Here are your options if you don't want to modify the markup.

如果您不想修改标记，可以选择以下选项。

Inline-block on the list items: http://jsfiddle.net/XNq74/1/

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

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

CSS columns would be a reasonable choice: http://jsfiddle.net/XNq74/

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

ul {
    columns: 2;
}

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

Flexbox would also work and can be used in combination with inline-block: http://jsfiddle.net/XNq74/2/

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

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

li {
    flex: 1 1 40%;
}

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

#2

-5

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

#1