等分
1.float
采用float的话，就是ul下 给li设置百分比了；
.nav-links li{ float:left; 25%; }
.percent-half li{ 50%; }
.percent-third li{ 33.333%; } ...
这个不够高大上，有时候当然也能解决问题。
2.table
这个在移动端确实好使，关键是没有兼容问题。主要是设置父元素的display:table; table-layout:fixed; 100%; 然后设置子元素为 display:table-cell; 即可。
<ul class="table-equal">
<li>手机</li>
<li>联系人</li>
<li>信息</li>
<li>主屏</li>
</ul>
<style>
.table-equal{ display: table; 100%; table-layout: fixed;}
.table-equal li{ display: table-cell;}
</style>
3.flex
flex是个好技术，不过其还有兼容性问题，据说算起来它有三个版本。
<!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>
做移动端，那么flex和transform这两大属性有必要熟练运用，运用好了能解决很多问题。一般来说flex可以用来实现一些布局，再也不用动不动就float了；而transform中的rotate及translate则可以实现一些旋转及位移移动，旋转可以搞定图标的一些变化，而位移移动则可以实现居中，位移动画等。
出处：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-uniform-and-center.html