如何在特定元素之后将列表分成两列？

Question

我有一个包含 6 个项目的列表，我想将其排列为两列布局。并且分割需要在元素号 3 之后进行。因此，左列有 3 个元素，右列有 3 个元素。我该如何实现这一目标？我根本无法编辑 HTML。

这是 HTML 布局：

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

Answer 1

您可以使用它来决定您希望拥有column-count多少列。ul

.columns {
  width: 150px;
  column-count: 2;
}

<ul class="columns">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>