纯css手机移动端可滚动的导航代码

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>手机移动端可滚动的导航代码</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style media="screen">
        *{ margin: 0; padding: 0;}
        .tab-head{
            margin: 100px 30px;
            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;
            height: 300px;
        }
    </style>
</head>
<body>
<div >
    <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>
</div>
</body>
</html>

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭