源自：1-2 tab页面布局-标题布局
底边框的问题
为什么我在li.select中设置border-bottom为none或0不能完全去除底边框,而是还存在一条细线呢(如下图)?用border-bottom-color:#fff就没问题.
*{
margin:0;
padding:0;
list-style:none;
font-size:12px;
text-decoration:none;
}
#notice{
width:298px;
height:98px;
margin:10px;
border:1px solid #f0f0f0;
}
.notice-title{
position:relative;
height:27px;
overflow:hidden;
background-color:#f7f7f7;
}
.notice-title ul{
position:absolute;
left:-1px;
width:300px;
}
.notice-title li{
float:left;
width:58px;
height:26px; /*26+1=27*/
line-height:26px;
font-size:16px;
padding:0 1px;
text-align:center;
border-bottom:1px solid #f0f0f0;
}
.notice-title a:link,.notice-title a:visited{
color:black;
}
.notice-title a:hover{
color:orange;
}
.notice-title li.select{
border-bottom:none;
border-left:1px solid #f0f0f0;
border-right:1px solid #f0f0f0;
padding:0;
background-color:#fff;
}
提问者：暮女神
2017-07-09 13:37
个回答
-
- 慕粉3787847
- 2017-07-17 16:34:34
.notice-title li.select{ border-bottom:none; }这里的下边框不能直接设置none，因为此时li标签的高度是26px，而父元素祖先原色.notice-title的高度是27px，设置为none之后，此时你看到的其实不是下边框，而是祖先元素的背景颜色，所以这时候只需要把下边框的背景颜色设置为#FFF即可，而不是清楚下边框。
.notice-title li.select{ border-bottom-color:#FFF; } -
- 慕粉3787847
- 2017-07-17 16:38:33
.notice-title li.select{
border-bottom:none;
}这里的下边框不能直接设置none，因为此时li标签的高度是26px，而祖先元素.notice-title的高度是27px，设置为none之后，此时你看到的其实不是下边框，而是祖先元素的背景颜色，所以这时候只需要把下边框的背景颜色设置为#FFF即可，而不是清楚下边框。
.notice-title li.select{
border-bottom-color:#FFF;
}