使用 column-count 和 border-style 不能一起使用

Question

所以我试图有一个项目列表，每个项目都有一个底线。我也试图将项目设置为 3 列。

这是我正在尝试做的一个例子：

HTML：

<div class="ul_div">
     <ul class="the_ul">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
    </ul>
</div>

CSS：

.ul_div{
    -webkit-column-count: 4;
    column-count: 3;
    border-style: solid;
}

.the_ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
}

li{
    border-bottom-style: solid;
    border-bottom-color: red;
    border-bottom-radius: 1px;
}

这是它的演示：jsfiddle

正如您所看到的，出于某种原因，底线并没有“卡在”其各自的 li 项目上。谁能告诉我为什么会发生这种情况以及如何解决？

谢谢！

Answer 1

首先，没有这样的事情border-bottom-radius，只有border-bottom-left-radius和border-bottom-right-radius，考虑到半径应用于元素的角的事实，这是合乎逻辑的。

现在，对于您的问题，您应该使用column-break-inside: avoid;来确保li元素不会被分成几列，将其一部分分为一列，另一部分分为下一列：

column-break-inside: avoid;
-webkit-column-break-inside: avoid; 

该小提琴。

而这里是关于分栏符的更多信息。