使用css實現移動端導航條滾動

 1 <div class="tab">
 2   <div class="table-item">
 3     <span class="tab-link">首頁</span>
 4   </div>
 5   <div class="table-item">
 6     <span class="tab-link">時政</span>
 7   </div>
 8   <div class="table-item">
 9     <span class="tab-link">思想理論</span>
10   </div>
11   <div class="table-item">
12     <span class="tab-link">黨建經驗</span>
13   </div>
14   <div class="table-item">
15     <span class="tab-link">最新動態</span>
16   </div>
17   <div class="table-item">
18     <span class="tab-link">中鐵魯班商務網</span>
19   </div>
20 </div>

 1 .tab {
 2     white-space: nowrap; // 這個必須有
 3     height: 1.466666666666667rem;
 4     line-height: 1.466666666666667rem;
 5     font-size: 0.426666666666667rem;
 6     overflow-y: hidden; // 這個必須有
 7 }
 8 .tab .table-item {
 9     padding-left: 0.133333333333333rem;
10     padding-right: 0.133333333333333rem;
11     display: inline-block; // 這個必須有
12 }

這個demo在瀏覽器模擬的時候會有底部滾動條，當在真機上時，滾動條會消失