css - CSS:リストを縦に折り返す方法は?

Question

やや長いリストがあり、垂直の列に「ラップ」したいと考えています。10 項目のリストがあり、1 列あたり 5 項目にしたい場合、レイアウトは次のようになります。

1   6
2   7
3   8
4   9
5   10

CSSでこれを行う方法はありますか？

Answer 1

申し訳ありませんが、実際には非常に簡単です。

ul {
-webkit-column-count: 2;
   -moz-column-count: 2;
        column-count: 2;
}

このデモをチェックしてください

Answer 2

CSS3 列を使用します。特に、 を設定した場合はcolumn-width、必要な数の列を作成する必要があります。各列に同じ数の項目を与えるよりも下に行くことを優先したい場合は、に設定できcolumn-fillますauto。