Question

我有一些带有一些物品的UL。我使用CSS圈技巧将子弹变成圆圈。但是，我希望在每个项目下方显示边框，以便在项目之间提供分隔。

由于我设置了子弹并使用了list-style：none，因此“bullet”被放置在-1em，这意味着边界不会在子弹下延伸。

<ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li class="selected">Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>



ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: red;
}
li:before {
    content:"";
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    width: 10px;
    height: 10px;
    left: -1em;
    top: 0.9em;
    position: relative;
    display: block;
}
selected:before {
    background-color: white;
}

这是Plunker

关于如何使底部边框延伸到整个列表项下方的任何建议，包括项目符号？

Answer 1

您通过将子弹显示为块元素，然后尝试使用top和left属性来纠正此问题，从而强制子弹和文本在不同的行上。

显示你的子弹内联并在右边给它一个边距：

li:before {
    content:"";
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    width: 10px;
    height: 10px;
    margin-right:0.3em;
    position: relative;
    display: inline-block;
}

如果您需要列表项中的空格，请填写一些：

li {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: red;
    padding:3px 4px;
}

JSFiddle

Answer 2

在你的风格上，你可以添加：

padding-left:1em;
margin-left:-1em;

填充将偏移内部的所有内容，因此它们与边框对齐。然后边距将李本身设置回左侧以使其保持在其原始位置。

plunker fork：http://plnkr.co/edit/zhir039xFgkF0mjKLJyq?p=preview

Answer 3

这是一个带有正确代码的plunker：

http://plnkr.co/edit/ocbEEs6wylufmcPL88vh?p=preview

基本上您需要执行以下操作：

删除ul

将1em的左侧填充添加到li

ul {
    margin: 0.75em 0;
    padding: 0;
    list-style: none;
}

li {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: red;
    padding-left: 1em;
}

繁荣，你有它。

使用样式子弹时，在UL中延伸底部边框

3 个答案: