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

╰+哭是因爲堅強的太久メ 2022-12-20 11:13 188阅读 0赞

![170bc037b1bf2890074dae6d1910aa8a.png][]

## 利用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>

[170bc037b1bf2890074dae6d1910aa8a.png]: /images/20221120/8179e7269bf249b7a077eae5aaa9c809.png

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 css横向滚动列表

![在这里插入图片描述][20200413164239281.gif_pic_center] <ul class="video_list"> <li>

朱雀/ 2023年07月25日 08:45/ 0 赞/ 168 阅读

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

![170bc037b1bf2890074dae6d1910aa8a.png][] 利用display:-webkit-box来实现移动端横向滑动列表 <!DO

╰+哭是因爲堅強的太久メ/ 2022年12月20日 11:13/ 0 赞/ 189 阅读

相关移动端使用Swiper实现左右滑动切换内容

效果图如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

青旅半醒/ 2022年12月19日 09:26/ 0 赞/ 441 阅读

相关移动端解决左右滑动的纯css布局

移动端解决左右滑动的纯css布局 ![在这里插入图片描述][20210529164745206.gif] <!DOCTYPE html> <html>

àì夳堔傛蜴生んèń/ 2022年10月16日 09:54/ 0 赞/ 185 阅读

相关移动端横向滚动

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8">

朱雀/ 2022年10月02日 14:55/ 0 赞/ 200 阅读

相关横向滚动条导航的实现（纯css）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

水深无声/ 2022年09月05日 12:53/ 0 赞/ 279 阅读

相关纯CSS实现下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xh

向右看齐/ 2022年07月12日 06:40/ 0 赞/ 294 阅读

相关移动端滑动

前言移动端，滑动是很常见的需求。很多同学都用过[swiper.js][]，本文从原理出发，实践出一个类swiper的滑动小插件[ice-skating][]。小插件

以你之姓@/ 2022年05月30日 08:45/ 0 赞/ 333 阅读

相关移动端滑动删除

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdo

╰半夏微凉°/ 2022年03月14日 13:52/ 0 赞/ 291 阅读

相关纯CSS 移动端，根据宽度获取高度

html部分代码 <div class="goods_div"> <div class="goods_li"> </div>

约定不等于承诺〃/ 2021年08月29日 18:10/ 0 赞/ 397 阅读