CSS 显示：新行上的表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14772778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display: table-cell on new row
提问by codiac
Here is an example code for what I mean:
这是我的意思的示例代码：
HTML
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?
问：如何使第三个和第四个<li>（表格单元格）显示在宽度为 50% 的新行上？
Q: Is there a way using only CSS and not jQuery or Javascript?
问：有没有办法只使用 CSS 而不是 jQuery 或 Javascript？
回答by cimmanon
The simple answer is: you can't, at least not with lists. Adjacent elements with their display set to table-cellare 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.
简单的答案是：您不能，至少不能使用列表。显示设置为 的相邻元素table-cell被视为属于同一行（即使未提供行元素，也会为您创建一个匿名元素）。由于列表不允许在 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
http://caniuse.com/#feat=multicolumn
Flexbox would also work and can be used in combination with inline-block: http://jsfiddle.net/XNq74/2/
Flexbox 也可以工作并且可以与 inline-block 结合使用：http: //jsfiddle.net/XNq74/2/
ul {
display: flex;
flex-flow: row wrap;
}
li {
flex: 1 1 40%;
}
回答by sonia jain
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
