将列表分为两列

本文介绍了将列表分为两列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试建立一个像这样的无序列表:

I'm trying to build an unordered list something like this:

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

It builds the two columns as it's supposed to, but it puts 4 items in the left side and 2 in the right side (4x2). What I wanted is 3 x 3.

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

I also tried to use the balance value in the column-fill property, but it didn't work.

我在这里想念什么?

推荐答案

将多列类提供给ul元素而不是div，它将把<ul>元素中的li元素分为两列.

Give the multi-column class to the ul element instead of div and it will divide the li elements in the <ul> element into two columns.

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

and add list-style-position: inside; to the css of .multi-column class.

以下是解决方案的链接: jsfiddle/573mtbv5/

Here is the link of the solution: jsfiddle/573mtbv5/