这是一个我的意思的示例代码：
<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？
解决方法
简单的答案是：你不能,至少没有列表.将其显示设置为表格单元格的相邻元素视为属于同一行(即使未提供行元素,也将为您创建一个匿名元素).由于列表不允许在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%;
}
