移动端HTML

display:-webkit-box 把该元素中的所有元素变成块级元素，比如 

<ul class="top-nav">
    <li>地图</li>
    <li>周边</li>
    <li>路线</li>
    <li>字体</li>
</ul>

ul li{
    list-style: none;  //去掉li 前面的黑点。
}

.top-nav{
    display:-webkit-box;               //把上面列表的四个 li 元素变成块级元素，在一行内显示。
　　border-bottom: #2d6ca2 solid 1px;   //在列表  ul 的下面加一条实线

}

.top-nav li{
    height: 51px;              //设置行的高度
    -webkit-box-flex: 1;       //拉开字体间距
    -webkit-box-pack: center;   //设置水平方向居中
    display: -webkit-box;       //使li中的字体处于box中
    -webkit-box-align: center;   //设置垂直方向居中
}

icon:  https://icomoon.io/app/#/select

移动端HTML

原文：http://www.cnblogs.com/z360519549/p/5857767.html