LI 导航
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;
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" name="viewport"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta content="telphone=no" name="format-detection"> <title>等分居中</title> <link media="all" href="http://www.w3cplus.com/mcommon/reset.css" rel="stylesheet"> <style type="text/css"> .demo{ line-height:44px; margin-bottom: 20px; text-align: center; background-color: #0078e7; color: #fff; } .flex-equal,.flex-center, .justify { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex-equal li { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; } .table-equal { display: table; table-layout: fixed; width: 100%; } .table-equal li { display: table-cell; } .demo-center{ border: 1px solid #ccc; margin:20px; height:200px; } .demo-center .children{ background: #0078e7; color: #fff; width:150px; line-height:5; text-align:center; } .flex-center { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .translate-center{ position: relative; } .translate-center .children{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .justify { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 0 10px; background: #0078e7; color:#fff; line-height: 32px; } </style> </head> <body> <h2>flex等分</h2> <ul class="flex-equal demo"> <li>手机</li> <li>联系人</li> <li>信息</li> <li>主屏</li> </ul> <ul class="flex-equal demo"> <li>手机</li> <li>联系人</li> <li>信息</li> </ul> <h2>table等分</h2> <ul class="table-equal demo"> <li>手机</li> <li>联系人</li> <li>信息</li> <li>主屏</li> </ul> <ul class="table-equal demo"> <li>手机</li> <li>联系人</li> <li>信息</li> </ul> <h2>flex居中</h2> <div class="flex-center demo-center"> <div class="children">子元素水平垂直居中</div> </div> <h2>translate居中</h2> <div class="translate-center demo-center"> <div class="children">子元素水平垂直居中</div> </div> <h2>两端对齐</h2> <div class="justify"><h2>左边对齐</h2><span>右边对齐</span></div> </body> </html>
原文地址：http://www.cnblogs.com/xinlinux/p/4463608.html
人如代码，规矩灵活；代码如诗，字句精伦。
