21

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

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？

4

2 回答 2

21

简单的答案是：你不能，至少不能用列表。显示设置为的相邻元素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 也可以工作，并且可以与 inline-block 结合使用：http: //jsfiddle.net/XNq74/2/

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

li {
    flex: 1 1 40%;
}

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

于 2013-02-08T13:07:15.423 回答
-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
于 2013-02-08T12:47:12.547 回答