将列表分成两列

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 值，但是没有用。

我在这里错过了什么？

原文由 José Pinto 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 Kaan Burak Sener 发布，翻译遵循 CC BY-SA 3.0 许可协议