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

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

<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之间包含任何其他标签,所以列表不可能.您必须使用不同的标记或不同的样式.

如果您不想修改标记,这是您的选择.

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

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

ul {
    columns: 2;
}

FlexBox也可以使用,可以与内嵌块结合使用：http://jsfiddle.net/XNq74/2/

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

li {
    flex: 1 1 40%;
}

相关文章