如何使用列数排列列表项？

Question

i want to arrange the list items using column count or any other alternative. i want to limit the rows in this code <li> may vary

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>1</li>
    <li>2</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
</ul>

and css is

ul {
column-count: 3;
column-gap: 20px;
 }

Desired output

a                     g
b                     h
c                     i
d                     j
e                     k
f
1
2

Answer 1

my two-pennies: example in js

just using some jquery to move items in an intermediate div with float: left

Answer 2

You can do it like this (which won't give you the one-and-a-half columns you have, though...):

ul {
  width: 50%;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}
li {
  list-style: none;
  background: #ddd;
}

As you wrote, the content will always be distributed as evenly as possible in the columns. A height setting will only influence the result if it's smaller than what fits into the number of given columns. See this codepen:

http://codepen.io/anon/pen/pbVgxb

Answer 3

Try this.

 .ulist { -moz-column-count:2; -webkit-column-count:2; column-count:2; height: 200px; } li { height:20px; } 

 <ul class="ulist"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>1</li> <li>2</li> <li>g</li> <li>h</li> <li>i</li> <li>j</li> <li>k</li> </ul> 

Answer 4

You could use flex-direction: column and flex-wrap: wrap to make the first column fill first, then the second, ... etc:

 ul { display: flex; flex-direction: column; flex-wrap: wrap; height: 190px; width: 300px; border: 1px solid; } 

 <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>1</li> <li>2</li> <li>g</li> <li>h</li> <li>i</li> <li>j</li> <li>k</li> </ul>