将列表分为两列

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,它将元素中的li元素<ul>分成两列.

<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/