Divide list into two columns

问题

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

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

I have this 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>

and this 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;
}

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.

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

What am I missing here?

回答1:

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>

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

Here is the link of the solution: https://jsfiddle.net/573mtbv5/

回答2:

The class multi column needs to be added to the ul, also you need to add the style below if you want to keep the bullets in both columns.

list-style-position: inside;

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

回答3:

That is to correct code. By itself it works fine. Do you have any other code around that? You have included all the CSS for all browsers so I think there is something else going on that is making it not render correctly.

There is another answer at: Is there a way to break a list into columns?

That basically does the same thing. If you only have one column you can't dictate how many items will show because they all will.

So I think the way you did it is the best way.

来源：https://stackoverflow.com/questions/36160007/divide-list-into-two-columns

标签

html

css

css3