移動端多個tab頁滑動

如下圖,實現的目的就是如果有多個tab標籤,但是佈局只能顯示三個,其餘的往後排列,可以滑動找到。

實現代碼

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maxi-mum-scale=1.0,user-scalable=no"
    name="viewport" />
  <title>左右拖動</title>
</head>
<style>
  .box {
    display: -webkit-box;
    overflow: auto;
    /*適應蘋果*/
    -webkit-overflow-scrolling: touch;
  }

  .bq {
    list-style: none;
    font-size: 22px;
    margin: 10px 30px 15px 10px;
  }

  /*隱藏滾動條     測試谷歌瀏覽器沒有下面這一條也會自動隱藏*/
  .box::-webkit-scrollbar {
    width: 0;
  }
</style>

<body>
  <ul class="box">
    <li class="bq">Tab欄目1</li>
    <li class="bq">Tab欄目2</li>
    <li class="bq">Tab欄目3</li>
    <li class="bq">Tab欄目4</li>
  </ul>
</body>

</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章