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;
}

演示

注意：目前对该属性的支持是冒险的，有关对该属性的支持的更多信息，您可以参考这里