css - 表示: 新しい行の表セル

Question

これが私が意味するコードの例です：

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>Q: 3 番目と 4 番目(表のセル) を幅 50% の新しい行に表示するにはどうすればよいですか?

Q: jQuery や Javascript を使用せず、CSS のみを使用する方法はありますか?

Answer 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.

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

Inline-block on the list items: 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/

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/

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

li {
    flex: 1 1 40%;
}

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

Answer 2

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