css實現手機端導航欄左右滑動

本文轉載自查看原文 2019-07-03 15:42 2931 css

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
  <style media="screen">
    .tab-head{
      list-style-type: none;
      display:-webkit-box;
      display:-webkit-flex;
      display:-ms-flexbox;
      display:flex;
      -webkit-flex-wrap:nowrap;
      -ms-flex-wrap:nowrap;
      flex-wrap:nowrap;
      -webkit-box-pack:justify;
      -webkit-justify-content:space-between;
      -ms-flex-pack:justify;
      justify-content:space-between;
      background:#FF4878;
      padding:0;
      overflow:auto;
      }
    .tab-head-item{
      -webkit-box-flex:1;
      -webkit-flex:1 0 auto;
      -ms-flex:1 0 auto;
      flex:1 0 auto;
      color:white;
      padding:0 5px;
      }
  </style>
</head>
<body>
    <ul class="tab-head">
        <li class="tab-head-item">興趣愛好</li>
        <li class="tab-head-item">興趣愛好</li>
        <li class="tab-head-item">興趣愛好</li>
        <li class="tab-head-item">興趣愛好</li>
        <li class="tab-head-item">興趣愛好</li>
        <li class="tab-head-item">興趣愛好</li>
        <li class="tab-head-item">興趣愛好</li>
        <li class="tab-head-item">興趣愛好</li>
        <li class="tab-head-item">興趣愛好</li>
        <li class="tab-head-item">興趣愛好</li>
        <li class="tab-head-item">興趣愛好</li>
    </ul>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css實現手機端導航欄左右滑動 vue移動端實現手機左右滑動入場動畫實現手機端滑動導航條，帶有彈性回彈效果結合css與javascript來實現手機移動端的屏幕滑動效果手機端左右滑動,不用寫js(只有頁面切換到移動端可以看) 移動端左右滑動導航讓tab導航在手機移動端有平滑滑動的效果 android ViewPager左右滑動實現導航欄的背景隨頁面滑動而滑動手機端滑動banner代碼 js判斷手機的左右滑動