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

1. <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>

    

1. .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*/
   }

    

 

来自为知笔记(Wiz)