纯css实现移动端横向滑动列表

2020-11-11

字数统计: 369字 | 阅读时长: 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>

二、第二种方法

<!DOCTYPE html>
<html>
<head>
    <title>横向滑动</title>
    <style type="text/css">
        .slide-box{
            margin-top: 200px;
            height:35px;
            //---------------------------------------------------------------
            display: flex;
            overflow-x: scroll;
            -webkit-overflow-scrolling:touch;
            //---------------------------------------------------------------
        }
        .slide-item{
            //-----------子元素不收缩------------------------------------------
            flex-shrink:0;
            //---------------------------------------------------------------
            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>

本文作者： 阿清そ
发布时间： 2020-11-11
最后更新： 2020-11-12
本文标题： 纯css实现移动端横向滑动列表
本文链接： https://www.aqingya.cn/articl/2d618fa7.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true