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

來源:互聯網
上載者:User

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

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.