如何在手机端显示导航栏横向内滚动，可以左右滑动

最新推荐文章于 2023-12-18 14:31:28 发布

家里有个兔崽子

最新推荐文章于 2023-12-18 14:31:28 发布

阅读量1.6w

点赞数 7

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_38330185/article/details/79991903

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

效果图如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="maincate" class="maincate">
    <a href="#">首页</a>
    <a href="#">SuperMap</a>
    <a href="#">三维GIS</a>
    <a href="#">移动GIS</a>
    <a href="#">云GIS</a>
    <a href="#">二三维一体化</a>
    <a href="#">大数据GIS</a>
</div>
<div>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
</div>
<style>

    .maincate{width: 100%;
        height: 50px;
        line-height: 50px;
        white-space: nowrap;
        box-shadow: 0 1px 2px rgba(0,0,0,.1);
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
        -webkit-overflow-scrolling: touch;
        text-align: justify;
        background: #f78361;
        padding: 0px 5px;
        box-sizing: border-box;
    }
    .maincate a{ color: #fff; text-decoration: none; margin-right: 10px;}
    .maincate::-webkit-scrollbar{display: none;}
</style>
</body>
</html>

家里有个兔崽子

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
如何在手机端显示导航栏横向内滚动，可以左右滑动

效果图如下&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content="wid
复制链接

扫一扫

专栏目录