如何使用纯css实现移动端列表横向滑动

最新推荐文章于 2024-07-25 10:45:42 发布

阿清呀.

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量464

点赞数 1

分类专栏： css 文章标签： css

原文链接：https://blog.csdn.net/weixin_42050203/article/details/82712176

版权

css 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

利用display:-webkit-box来实现移动端横向滑动列表

<!DOCTYPE html>
<html>
<head>
    <title>横向滑动</title>
    <style type="text/css">
        .slide-box{
            margin-top: 200px;
            height:35px;
            //---------------------------------------------------------------
            display: -webkit-box;
            overflow-x: scroll;
            -webkit-overflow-scrolling:touch;
            //---------------------------------------------------------------
        }
        .slide-item{
            padding:5px 10px;
            height: 35px;
        }
    </style>
</head>
<body>
    <div class="slide-box">
        <div class="slide-item">横向滑动</div>
        <div class="slide-item">横向滑动</div>
        <div class="slide-item">横向滑动</div>
        <div class="slide-item">横向滑动</div>
        <div class="slide-item">横向滑动</div>
    </div>
</body>
</html>

阿清呀.

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如何使用纯css实现移动端列表横向滑动

利用display:-webkit-box来实现移动端横向滑动列表<!DOCTYPE html><html><head> <title>横向滑动</title> <style type="text/css"> .slide-box{ margin-top: 200px; height:35px; //-------------.
复制链接

扫一扫

专栏目录