获取HTML列表以在两列之间动态交替

Question

我有一个html列表，我需要分成两列。我很好奇我是否可以在CSS中完全不用改变HTML代码。

例如：

我有一个这样的清单：

• 第1项
• 项目更长2
• 项目真的很长3
• 项目4
• 第5项5
• 第6项

但我希望将列表显示为两列宽度相等的列，但不更改HTML代码。

我尝试过使用子选择器和内嵌显示，但我无法弄清楚如何让第二列均匀启动。

这就是我想在CSS中实现的。这样，如果我继续添加到列表中，它会保持列之间的内容交替，并且始终使第二列保持均匀。

li {
display: inline;
}

<ul>
<li>Item 1</li>
<li>Item Longer 2</li>
<li>Item really long 3</li>
<li>Item this 4</li>
<li>Item five 5</li>
<li>Item 6</li>
</ul>

https://jsfiddle.net/u85avecb/

Answer 1

尝试使用flexbox。

ul {
display: flex;
flex-direction: column;
list-style: none;
max-height: 60px;
flex-wrap: wrap;
}

<ul>
<li>Item 1</li>
<li>Item Longer 2</li>
<li>Item really long 3</li>
<li>Item this 4</li>
<li>Item five 5</li>
<li>Item 6</li>
</ul>

Answer 2

您可以在不更改html代码的情况下使用此类列：

ul {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

<ul>
<li>Item 1</li>
<li>Item Longer 2</li>
<li>Item really long 3</li>
<li>Item this 4</li>
<li>Item five 5</li>
<li>Item 6</li>
</ul>