HTML:
<div class="my_nav"> <ul> <li class="tiao cur" id="order_tab_1"><a href="#">待付款</a></li> <li class="tiao " id="order_tab_2"><a href="#">待收货/提货</a></li> <li class="tiao " id="order_tab_3"><a href="#">全部订单</a></li> </ul> </div>
Css:
.my_nav { width: 100%; border: 1px solid #e0e0e0; border-width: 1px 0; background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; } .my_nav ul { display: box; display: -ms-box; display: -webkit-box; display: flex; display: -ms-flexbox; display: -webkit-flex; overflow: hidden; } .my_nav li.cur { background-color: #E5E5E5; } .my_nav li:first-child { border-left: 0; } .my_nav li { display: block; flex: 1; -ms-flex: 1; -webkit-flex: 1; box-flex: 1; -ms-box-flex: 1; -webkit-box-flex: 1; width: 100px; text-align: center; font-size: 12px; line-height: 36px; border-left: 1px solid #e0e0e0; padding: 0px; background-color: #f3f3f3; } .my_nav a { display: block; min-height: 36px; } a { border-bottom-color: #cccccc; border-bottom-style: none; COLOR: #888888; text-decoration: none; font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif; outline: none; }
原文地址:http://www.cnblogs.com/xinlinux/p/4463608.html
时间: 2024-08-08 08:07:36