CSS+HTML实现移动端div左右滑动展示

最新推荐文章于 2025-06-03 23:12:27 发布

dingjiao468280

最新推荐文章于 2025-06-03 23:12:27 发布

阅读量7.7k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bushui/p/11536553.html

本文介绍了如何使用CSS和HTML在移动端实现div元素的左右滑动展示。针对移动设备屏幕宽度有限的情况，通过CSS设置box不换行，并将box1设为行内块元素，实现了内容的滑动浏览。同时，文章提到了CSS的::-webkit-scrollbar在某些浏览器的兼容性问题，并给出了解决方案，即在外层添加overflow:hidden来隐藏滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　现在很多移动端网站效果都很炫，由于移动设备的宽度有限，而内容太多移动设备一行装不下的，所以都会有左右滑动，下面我就用CSS+HTML实现移动端div左右滑动展示。

CSS：box设置文本不换行，子元素box1行内块元素

.box{
    background: #eee;
    padding: 10px 0;
    white-space: nowrap;/*文本不会换行，文本会在在同一行上继续*/
    overflow-y:auto;/*可滑动*/
}
/*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
.box::-webkit-scrollbar{
    display: none;
}
.box1{
    width: 49%;
    margin-left: 3%;
    height: 100px;
    background: #fff;
    display: inline-block;/*行内块元素*/
}

HTML:

<div class="box">
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
</div>

运行效果

注：.box::-webkit-scrollbar的兼用性较差，有些浏览器无效(如：IE等)，我建议在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。

修改后的CSS：

.div{
    overflow: hidden;
    height: 118px;
}
.box{
    background: #eee;
    padding: 10px 0;
    white-space: nowrap;/*文本不会换行，文本会在在同一行上继续*/
    overflow-y:auto;/*可滑动*/
}
/*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
/*.box::-webkit-scrollbar{
    display: none;
}*/
.box1{
    width: 49%;
    margin-left: 3%;
    height: 100px;
    background: #fff;
    display: inline-block;/*行内块元素*/
}

修改后的HTML:

<!--外部嵌套层-->
<div class="div">
    <div class="box">
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </div>
</div>