CSS：如何垂直包装列表？

Question

我有一个很长的列表，希望它“包装”成垂直列。假设我有10个项目的列表，我希望每列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;
}

查看此DEMO

Answer 2

使用CSS3 columns。特别是，如果设置column-width，则应根据需要生成尽可能多的列。如果您希望它更倾向于向下而不是为每列提供相同数量的项目，则可以将column-fill设置为auto。