html - 多列 css 打破了 ul 内容问题

Question

我有多个 ul 部分并使用多列 css 将它们自动分成三列。问题是 css 破坏了 li 内容并将它们移动到下一列。我需要将整个 ul 移动到下一列而不是单个 li 内容。这是屏幕截图。

结果应该像

这是我的html代码

<div class="columnsmulti">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<ul>
<li>Lorem Ipsum123</li>
<li>Lorem Ipsum123</li>
</ul>
<ul>
<li>Lorem Ipsum456</li>
<li>Lorem Ipsum456</li>
<li>Lorem Ipsum456</li>
</ul>

</div>

这是我的CSS

.columnsmulti {
    -moz-column-count: 3; 
    -moz-column-gap: 10px;
    -moz-column-rule: 3px double #666;
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px;
    -webkit-column-rule: 3px double #666;
    column-count: 3;
    column-gap: 10px;
    column-rule: 3px double #666;
}  

我怎样才能做到这一点？

Answer 1

您应该在 css 中使用分列规则。这是一个适用于 Chrome 的示例：

.columnsmulti ul {
    -webkit-column-break-inside: avoid;
    -webkit-column-break-after: always;
}

在您的 css 中添加这些行，它将按您的要求工作。

参考

PS：-moz-column-break我的 Firefox 似乎无法识别。