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

正如您所看到的，由于某种原因，底线不会“卡住”其各自的项目。任何人都可以告诉我为什么会这样，以及我如何解决它？

谢谢！

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;

fiddle。

here是有关分栏符的更多信息。

Answer 2

您需要为li边框添加宽度。你可以这样买加边框底宽：1px;你的李班。您可以改为将您改为：

li{
  border: 0px solid red;
  border-bottom-width: 1px;
  border-radius: 1px;
}

您还可以使用border-bottom-left-radius和border-bottom-right-radius。

使用列计数和边框样式无法一起使用

2 个答案: