【问题标题】：Break columns only before specific list elements仅在特定列表元素之前断开列
【发布时间】：2021-04-26 14:59:09
【问题描述】：
我正在使用 CSS 列将列表分成 3 列。
它工作正常，但我无法控制休息的位置。
列表中有一些标题，我只想在它们之前打破。
有没有办法做到这一点？
我尝试使用break-before: avoid。但它不起作用。
这是我的代码：
ul {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 1.5rem;
-webkit-column-gap: 1.5rem;
column-gap: 1.5rem;
padding-left: 0;
list-style: none;
}
ul .title {font-size: 18px; font-weight: bold; margin: 20px 0 10px;}
<ul>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
【问题讨论】：
标签：
html
css
multiple-columns
【解决方案1】：
您可以强制使用分栏符，而不是尝试避免在标题前出现换行符。避免部分中断不起作用，因为从技术上讲，浏览器确实通过在列表中更早插入中断来避免中断。
使用break-before: column 可以解决问题。然而！请注意，缺少browser support；例如，column 可以在 Chrome 中工作，但不能在 Firefox 中工作。
ul {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 1.5rem;
-webkit-column-gap: 1.5rem;
column-gap: 1.5rem;
padding-left: 0;
list-style: none;
}
ul .title {
font-size: 18px;
font-weight: bold;
margin: 20px 0 10px;
break-before: column;
}
<ul>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
现在，说了这么多，我有一个偷偷摸摸的怀疑，语义上你想要的是三个不同的列表，每个都有一个标题，而不是一个巨大的列表。如果这是真的，那么您可以通过一些重组和使用 flexbox 来实现近乎完整的浏览器支持。
ul {
padding-left: 0;
list-style: none;
}
.outer-list {
display: flex;
}
.outer-list > li {
flex: 1;
}
ul .title {
font-size: 18px;
font-weight: bold;
margin: 20px 0 10px;
}
<ul class="outer-list">
<li>
<h1 class="title">Title</h1>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
<li>
<h1 class="title">Title</h1>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
<li>
<h1 class="title">Title</h1>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
</ul>
【解决方案2】：
您可以使用以下技术来满足您的要求。
ul {
padding-left: 0;
list-style: none;
width: 100%;
}
ul .title {
font-size: 18px;
font-weight: bold;
}
/* Create three equal columns that floats next to each other */
.col {
float: left;
width: 33.33%;
padding: 10px;
}
/* Clear floats after the columns */
.row{
display: inline-flex;
}
.row:after {
content: "";
display: table;
/* display: inline-flex; */
clear: both;
}
<ul class="row">
<div class="col">
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</div>
<div class="col">
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</div>
<div class="col">
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</div>
</ul>