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

標籤：body   tab   首頁   移動   商務   消失   flow   isp   col   

 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實現移動端導航條滾動