Question

我在div中有一个有序列表，我希望列表项上有一个左边框。我认为一个简单的border-left: 5px solid red;可以解决这个问题，但我想要列表编号左边的边框。我试图让它与li:before一起工作，但我似乎无法达到合适的高度。

有没有办法用:before或者更简单的方式来做到这一点？

到目前为止我所拥有的http://jsfiddle.net/q5yS6/

Answer 1

height上的

:before与其他元素的工作方式相同。仅当父级具有设定高度时，才能设置百分比高度。在这种情况下，:before元素的父元素是它之前的元素。因此，您需要为li添加一个高度，以使:before元素使用百分比高度：

http://jsfiddle.net/q5yS6/6/

.lists ol li {
    overflow: hidden;
    height: 35px;
}

.lists ol li:before {
    content: " ";
    display: block;
    float: left;
    height: 100%;
    border-left: 5px solid red;
    padding-left: 20px;
}

达到预期效果的另一个选择是将li设置为position: relative，将:before设置为absolute。您需要删除overflow: hidden。您可以使用list-style: none再次隐藏编号：

http://jsfiddle.net/q5yS6/5/

.lists ol li {
    position: relative;
    list-style: none;
}

.lists ol li:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    border-left: 5px solid red;
    padding-left: 20px;
}

使用top: 0和bottom: 0会产生100％高度的效果。

Answer 2

您可以简单地将List<MessageId>用于父级，而display: flex可以将相同的高度应用于所有孩子。

关于CSS flexbox的很好的文档，这里：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

align-items: stretch

li {
    display: flex;
    align-items: stretch;
    margin-bottom: 10px;
}

li::before {
    content: '';
    display: block;
    width: 5px;
    background-color: red;
    margin-right: 10px;
}

li p {
    font-size: 15px;
}

身高：100％开启：之前 - 有可能吗？

2 个答案: