zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    leetcode 6 ZigZag Conversion
    OpenCL异构计算资料收集
    leetcode 21 Merge Two Sorted Lists
    leetcode 226 Invert Binary Tree 翻转二叉树
    leetcode 8 String to Integer (atoi)
    leetcode 27 Remove Element
    【Office】add ins
    【office】deploy
    【Office】add ins manifest
    【设计】交互设计理念
  • 原文地址:https://www.cnblogs.com/liuhongxia/p/7066136.html
Copyright © 2011-2022 走看看