标签：
<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*/ }
标签：
原文地址：http://www.cnblogs.com/cnchenjunbiao/p/4479020.html
