html - 順序付けされていないリストが 3 番目の項目の後に新しい列に分割される

Question

サブアイテムが次のように3列に構築されるメニューを作成しようとしています:

A D G
B E H
C F

* 各文字は項目を表します

どうすればこれを達成できますか?

Jsfiddle: http://jsfiddle.net/pGgR7/3/

Answer 1

CSS3column-countプロパティを使用するのはどうですか?

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

デモ

注: このプロパティのサポートは現時点では危険です。このプロパティのサポートの詳細については、こちらを参照してください。