列表切换边框样式显示问题的处理

最新推荐文章于 2023-10-09 21:17:08 发布

weixin_30486037

最新推荐文章于 2023-10-09 21:17:08 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cnchenjunbiao/p/4479020.html

本文涵盖了信息技术领域的多个细分技术领域，包括前端开发、后端开发、移动开发等，提供了丰富的技术知识和实践经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<divclass="switch">
<ul>
<li>全部(<i>123</i>)</li>
<li>好评(<i>10</i>)</li>
<liclass="active">中评(<i>2</i>)</li>
<li>差评(<i>5</i>)</li>
<li>晒图(<i>5</i>)</li>
</ul>

.switch{
float: left;
width:858px;
height:32px; /*每个li的高度*/
line-height:32px;
border:1px solid #ccc; /*外边框设置四周1像素*/
margin-bottom:100px;
}
.switch li{
float: left;
width:100px;
text-align: center;
}
/*标签选中时*/
.switch li.active{
height:30px; /*改变li的高度，加上上边框3像素大于本身每个li的高度，所以可以把div下边框撑开*/
border-top:3px solid #8FAB72;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
background:#fff; /*用背景撑开它*/
}
.switch li:first-child.active{
border-left: none; /*ul下面的第一个子元素li*/
}