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>元素，如下所示：

<强> HTML

<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;
}

我只是改变了班级的宽度。 ＆＃34; side-menu li.active＆＃34;似乎工作。

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;    
}

Update JSFiddle