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

我的两便士：example in js

使用一些jquery在float: left

的中间div中移动项目

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

试试这个。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: