多列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中添加这些行，它将按您的要求运行。

Reference

P.S。：我的Firefox无法识别似乎-moz-column-break。