多列css打破了ul内容问题 [英] multi column css breaks ul content issue

问题描述

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

I have multiple ul sections and used multi column css to split them automatically into three columns. The problem is css breaks the li content and move them to the next column. I need to move the whole ul to the next column not the individual li content. This is the screenshot.

结果应该是

这是我的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;
}  

我该怎么做？

推荐答案

您应该在css中使用列分隔符规则。以下是适用于Chrome的示例：

You should use the column-break rules in css. Here's an example applies for Chrome:

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

在你的css中添加这些行，它将作为你的需求。

Add these lines in your css and it'll work as your demand.

参考

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

P.S.: Seems -moz-column-break isn't recognized by my Firefox.

这篇关于多列css打破了ul内容问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！