Question

我正试图让这个jsfiddle（http://jsfiddle.net/kkbdex3p/）看起来更像这样：http://i.imgur.com/8FxmAeR.jpg

更具体地说，我注意到在图像中，各部分之间的边框似乎在顶部和底部都有这个填充，因此边框不是全高。是否可以在我的jsfiddle示例中执行此操作，即使红色边框在顶部和底部有填充，以便它们不是全高？

我想过添加一个像这样的新元素：

<li class="divider"></li>

也许尝试设计（1px宽，顶部和底部填充），但我得到了奇怪的结果，如果可能的话，我会喜欢只有css的解决方案。有什么想法吗？

Answer 1

您可以使用:after伪元素来实现此目的：

li {
    display: inline-block;
    position: relative;
    padding: 0 20px;
}

li:after {
    display: block;
    position: absolute;
    top: 5px;
    bottom: 5px;
    border-right: 1px solid red;
    content: '';
    margin: 0 -20px;
}

li:first-child:after { display: none; }

jsFiddle Demo

是否可以向css边框属性添加填充？

1 个答案: