Question

我试图建立一个像这样的无序列表：

 - Item 1     |    - Item 4
 - Item 2     |    - Item 5
 - Item 3     |    - Item 6

我有这个HTML：

 <div class="multi-column">
    <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
       <li>Item 5</li>
       <li>Item 6</li>
    </ul>
 </div>

和这个CSS：

.multi-column {
   -moz-column-count: 2;
   -moz-column-gap: 20px;
   -moz-column-fill: auto;
   -webkit-column-count: 2;
   -webkit-column-gap: 20px;
   -webkit-column-fill: auto;
   column-count: 2;
   column-gap: 20px;
   column-fill: auto;
}

它按照它应该构建两列，但它在左侧放置4个项目，在右侧放置2个（4x2）。我想要的是3 x 3。

我还尝试在column-fill属性中使用 balance 值，但它没有用。

我在这里缺少什么？

Answer 1

将多列类赋予ul元素而不是div，它会将<ul>元素中的li元素分成两列。

<ul class="multi-column">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

并将list-style-position: inside;添加到 .multi-column 类的CSS中。

以下是解决方案的链接：https://jsfiddle.net/573mtbv5/

Answer 2

需要将类多列添加到ul中，如果要将项目符号保留在两列中，还需要添加下面的样式。

list-style-position: inside;

http://plnkr.co/edit/csfU5Xd0IaU8U9VKg5nS?p=preview

Answer 3

这是为了纠正代码。它本身工作正常。你有其他任何代码吗？你已经包含了所有浏览器的所有CSS，所以我认为还有其他一些东西会使它无法正确渲染。

还有另一个答案：Is there a way to break a list into columns?

这基本上做同样的事情。如果您只有一列，则无法决定将显示多少项，因为它们都会显示。

所以我觉得你这样做是最好的方式。

将列表分为两列

3 个答案: