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

概述我有多个ul部分,并使用多列css将它们自动拆分为三列.问题是css打破了li内容并将它们移动到下一列.我需要将整个ul移动到下一列而不是单独的li内容. 这是截图. 结果应该是 这是我的HTML代码 <div class="columnsmulti"><ul><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li> 我有多个ul部分,并使用多列CSS将它们自动拆分为三列.问题是CSS打破了li内容并将它们移动到下一列.我需要将整个ul移动到下一列而不是单独的li内容.
这是截图.

结果应该是

这是我的HTML代码

<div ><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的示例：

.columnsmulti ul {    -webkit-column-break-insIDe: avoID;    -webkit-column-break-after: always;}

在你的CSS中添加这些行,它将按你的要求工作.

Reference

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

总结

以上是内存溢出为你收集整理的html – 多列css打破了ul内容问题全部内容，希望文章能够帮你解决html – 多列css打破了ul内容问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。