我正在尝试建立一个像这样的无序列表:
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/
更多推荐
将列表分为两列
发布评论