纯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>
阅读更多
想对作者说点什么?

博主推荐

换一批

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