无序列表：在开始新列之前限制列表项的数量

Question

我的脑子坏了，如果这看起来非常简单，我深表歉意：

我有一个无序列表：

<ul class="activeList">
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
   <li class="item">Item 4</li>
   <li class="item">Item 5</li>
   <li class="item">Item 6</li>
</ul>

我想要做的就是让它垂直显示成两列，但在第 4 项之后，开始第二列。所以它看起来像这样：

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

我试过 CSS 中的浮点数和列数，但我能得到的最好结果是：

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

我希望让它在 4 处结束该列，然后开始下一列。
我希望找到仅 CSS 的解决方案。

Answer 1

我认为最好和最简单的方法是使用 flexbox。您必须将列表分为两部分：第 1 部分从元素 1 到 4/第 2 部分从元素 5 到 6。然后将它们包装到一个 display flex 容器中。

那就行了，看看代码片段:)

#container { /*The only CSS property you need*/
    display: flex;
}

<div id="container"> <!--flex container-->
    <ul class="activeList-1-4"> <!--first list-->
        <li class="item">
            Item 1
        </li>
        <li class="item">
            Item 2
        </li>
        <li class="item">
            Item 3
        </li>
        <li class="item">
            Item 4
        </li>
    </ul>
    <ul class="activeList-5-6"><!--second list-->
        <li class="item">
            Item 5
        </li>
        <li class="item">
            Item 6
        </li>
    </ul>
</div>

Answer 2

如果你给容器一个高度，这里你的容器是 'activeList' 并且给你的容器 'display: inline-flex' 和 flex wrap 用于包装。 demo

.activeList{
  display: inline-flex;
  flex-direction: column;
  height: 72px;
  flex-wrap: wrap;
}

.item{
    padding: 0 5px;
}

Answer 3

我通过使用 flex-wrap 和第 n 个 child 实现了这一点。看看codepen，应该还不错self-explanatory。如果没有，请告诉我！这样做的好处是，如果您需要的不仅仅是 2 列，它就可以工作。

查看演示和 codepen:

.activeList{
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;  
}

.item:nth-child(3n){
  page-break-after:always; 
  break-after: always;
}

<ul class="activeList">
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
   <li class="item">Item 4</li>
   <li class="item">Item 5</li>
   <li class="item">Item 6</li>
</ul>

Answer 4

所以，我偶然发现了最简单的CSS-只有在我发布问题后几乎立即回答，所以我将与大家分享：

UL 需要有一个固定的高度，加上 CSS 规则 column-fill: auto。确保 LI 具有固定高度（可以修改），您可以调整 LI 的高度，直到在您需要的位置发生换行，无论您希望换行发生在第四个 li 之后，还是任何其他 li。

.active-list {
     padding-left: 0;
    column-count: 2;
    column-fill: auto;
    width: 500px;
    overflow: hidden;
    padding: 10px;
    background: #595757;
    height: 245px;
}

.item {
    width: 100%;
    height: 50px;
    perspective: 1000px;
    display: block;
    margin-bottom: 10px;
    background: red;
}

<ul class="active-list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
  <li class="item">Item 6</li>
</ul>

无序列表：在开始新列之前限制列表项的数量

Unordered Lists: Limiting the number of List-items before starting a new column

css

multiple-columns

html-lists

css-float