css -边框相互重叠

Question

我有个问题。我的底部边框是在同一元素上“重叠”我的右边框。

这就是它的样子：http://awesomescreenshot.com/0311z2fy84

如你所见，绿色右边框底部，看起来很混乱，因为底部灰色的边框。我怎么才能解决这个问题？

这是css：

.side-menu{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.side-menu li{
    border-bottom: 1px solid #E6E7E9;
    padding: 7px;
    padding-left: 0px !important;
    width: 192px;
}
.side-menu li.active{
    color: #CACDD0;
    border-right: 6px solid #2CC588;
    width: 199px;

} 

编辑:新增jsFiddle：http://jsfiddle.net/wu958/

Answer 1

我假设<li>元素将在其中有一个<a>链接？

您可以将边框右添加到<a>元素中，如下所示：

<li class="active"><a href="#">Banners</a></li>

CSS

.side-menu li a {
    padding: 7px;
    display: block;
}
.side-menu li.active a {
    border-right: 6px solid #2CC588;
}

请参考这个JsFiddle，它显示了一个更好的工作示例。

Answer 2

试试这个：

.side-menu{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.side-menu li{
    border-bottom: 1px solid #E6E7E9;
    padding: 7px;
    padding-left: 0px !important;
    width: 192px;
}
.side-menu li.active {
    color: #a2a7ad;
    border-right: 6px solid #2CC588;
    width: 204px;
}

我只是改变了类的宽度。“侧菜单li.active”，看起来很管用。

Answer 3

您可以使用::after伪元素来避免此类问题：

.side-menu li{
    line-height: 35px;
    padding-left: 18px !important;
    width: 210px;
    color: #37434f;
}
.side-menu li::after {
    content: ' ';
    display: block; 
    border-bottom: 1px solid #E6E7E9;    
}

更新JSFiddle

​

​