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

àì夳堔傛蜴生んèń 2022-10-16 09:54 200阅读 0赞

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

![在这里插入图片描述][20210529164745206.gif]

<!DOCTYPE html>
    <html>
    <head>
        <title>纯css实现左右滑动</title>
        <style type="text/css">
            ul,li{ 
                list-style: none;;
            }
            .slide-box{ 
                margin-top:200px;
                display: -webkit-box;
                overflow-x: auto;
                /*适应苹果*/
                -webkit-overflow-scrolling:touch;
            }
            .slide-item{ 
                width: 300px;
                height: 300px;
                border:1px solid #ccc;
                margin-right: 30px;
                background: pink;
            }
            /*隐藏掉滚动条*/
            .slide-box::-webkit-scrollbar { 
                display: none;
            }
        </style>
    </head>
    <body>
    <ul class="slide-box">
        <li class="slide-item"></li>
        <li class="slide-item"></li>
        <li class="slide-item"></li>
        <li class="slide-item"></li>
        <li class="slide-item"></li>
    </ul>
    </body>
    </html>

[20210529164745206.gif]: /images/20221014/6fecf31075ba44ce9dec97cf272bb429.png

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS - 移动端布局（二）移动端适配

目录通过上一节的学习移动端网页的布局固定尺寸布局百分比布局 rem布局 vw布局仿京东移动端首页开发实例（rem布局、vw布局） ----------

淩亂°似流年/ 2023年09月28日 21:36/ 0 赞/ 36 阅读

相关弹性布局左右滑动

弹性布局用起来是真的方便，但是今天老板要实现左右滑动的效果，这可为难我了，翻阅资料，终于找到方法了，上代码。 <view class="content">

待我称王封你为后i/ 2023年01月15日 10:26/ 0 赞/ 236 阅读

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

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

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

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

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

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

相关 CSS布局----flex弹性布局(移动端完美解决方案）

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox

不念不忘少年蓝@/ 2022年11月15日 14:08/ 0 赞/ 305 阅读

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

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

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

相关实现卡片布局，左右滑动

人人影视版特点（需求）：动画：最多可见的这四层，在顶层卡片滑动时，每一层都会位移&放大动画，有种补充到顶层的感觉。动画：松手时，如果未被判定为删除，则会有顶层

谁借莪１个温暖的怀抱￠/ 2022年07月11日 04:27/ 0 赞/ 366 阅读

相关移动端上下左右滑动事件

注意：要用on方法 $(".activity\_goods").on("touchstart",'.activity\_goods\_left',function(e) \{

浅浅的花香味﹌/ 2022年05月15日 08:27/ 0 赞/ 341 阅读

相关 css 移动web li 左右两列布局

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title>

雨点打透心脏的1/2处/ 2022年04月23日 15:42/ 0 赞/ 319 阅读

相关纯JS实现左右滑动布局和滑动

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta nam

墨蓝/ 2022年04月18日 04:26/ 0 赞/ 792 阅读