css - borders overlap each other
문제
I am having a problem. My bottom border is "overlapping" my right border on the same element.
This is how it looks like: http://awesomescreenshot.com/0311z2fy84
As you can see, the green right borders bottom, is looking messed up, because of the bottom gray border. How can I fix this?
This is the 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;
}
Edit: Added jsFiddle: http://jsfiddle.net/wu958/
해결책
I assume the <li>
elements will have an <a>
link inside?
You could add the border right to the <a>
elements like so:
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;
}
Refer to this JsFiddle which shows a better working example.
다른 팁
try this:
.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;
}
I simply changed the width of the class. "side-menu li.active" and seems to work.
You can use the ::after
pseudo-element to avoid this kind of problems :
.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;
}
제휴하지 않습니다 StackOverflow