CSS列计数显示一些混乱

Question

以上只是一个ul和li，我在ul上添加了列数。在悬停＆lt; a＆gt;标记它在第一列中显示一半而在第二列中显示另一半。

我试过了

display: inline-block;
display: block;

但我得到的结果相同。我的代码如下。

HTML

<ul class="classname">
    <li><a href="#">Column 1 - 1</a></li>
    <li><a href="#">Column 1 - 2</a></li>
    <li><a href="#">column 2</a></li>
    <li><a href="#">column 3 - 1</a></li>
    <li><a href="#">column 3 - 2</a></li>
    <li><a href="#">column 4</a></li>
</ul>

CSS

.classname {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    -o-column-count: 4;
    column-count: 4;
}
.classname li {
    font-size: 15px;
    color: black;
    display: block;
    margin: 0px;
}
.classname li a {
    display: block;
    padding: 6px 10px;
    font-size: 13px;
    color: #444;
    letter-spacing: 0.5px;
}

Answer 1

我认为你需要玩break-inside: avoid-column;：

.classname {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    -o-column-count: 4;
    column-count: 4;
}
.classname li {
    font-size: 15px;
    color: black;
    display: block;
    margin: 0px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}
.classname li a {
    display: block;
    padding: 6px 10px;
    font-size: 13px;
    color: #444;
    letter-spacing: 0.5px;
}
li:nth-child(even) {
  background: teal;
}

<ul class="classname">
    <li><a href="#">Column 1 - 1</a></li>
    <li><a href="#">Column 1 - 2</a></li>
    <li><a href="#">column 2</a></li>
    <li><a href="#">column 3 - 1</a></li>
    <li><a href="#">column 3 - 2</a></li>
    <li><a href="#">column 4</a></li>
</ul>