您当前的位置: 首页 > HTML/CSS

手机移动端可以滚动的导航代码（纯CSS）

发布时间：2019-12-17 21:47:03 文章来源：www.iduyao.cn 采编人员：毒药

手机站滚动导航代码，纯CSS写法：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>手机站滚动导航代码（纯CSS）</title>
 
    <style>
.tab-head{
   border-top: 1px solid #ccd3e4;
    list-style-type: none;
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    padding:0;
   overflow:auto;
}
.tab-head-item{
    flex:1 0 auto;
    color:#000;
    padding:4px 5px 5px!important;
}
    </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>

css 手机站导航代码

友情提示：
信息收集于互联网，如果您发现错误或造成侵权，请及时通知本站更正或删除，具体联系方式见页面底部联系我们，谢谢。

手机移动端可以滚动的导航代码（纯CSS）

相关帖子：

热门分类：