如何使用列數排列列表項？

Question

我想使用列數或其他任何方式排列列表項。 我想限制此代碼中的行<li>可能有所不同

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

和CSS是

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

所需的輸出

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

Answer 1

我的兩個便士： js中的示例

只是使用一些jquery在帶有float: left的中間div中移動項目float: left

Answer 2

您可以像這樣進行操作（盡管這樣不會給您提供一個半欄的內容……）：

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

如您所寫，內容將始終在各列中盡可能均勻地分布。 高度設置只有在小於給定列數的范圍內才會影響結果。 看到這個codepen：

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

Answer 3

嘗試這個。

 .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

您可以使用flex-direction: column和flex-wrap: wrap來使第一列首先填充，然后填充第二列，等等。

 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>