移動端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