多列css打破了ul内容问题

问题描述：

我有多个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内容问题

相关推荐