1. 程式人生 > >使用css實現移動端導航條滾動

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

動態 inline -i 使用 div 導航條 底部 ble pac

 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在瀏覽器模擬的時候會有底部滾動條,當在真機上時,滾動條會消失

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