多行UL列表

Question

我有一个包含6个项目的列表，我希望列表是多列的，所以在第一列上它将显示前3个项目，在第二列上显示以下3个项目，依此类推...... 但我真的无法理解如何使用UL创建此行为..我尝试使用选项，例如设置UL {height:50%;}，但没有结果

这是一个基本的小提琴 http://jsfiddle.net/n8f7hxzo/

我知道我可以使用表但我不想，只是想知道是否有关于这个问题的简单解决方案

Answer 1

使用像http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/这样的css列可以解决您的问题

Answer 2

您必须使用display:inline-block才能水平显示您的商品。

为LI添加宽度（例如33％），它将起作用。

FIDDLE

Answer 3

请尝试以下操作： Demo

CSS：

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