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列.特别是,如果设置column-width,它应根据需要生成尽可能多的列.如果您希望它更喜欢向下而不是为每列提供相同数量的项目,您可以设置column-fill为auto.