Css实现内容溢出添加横向滚动条

最新推荐文章于 2025-05-13 17:37:39 发布

明知山_

最新推荐文章于 2025-05-13 17:37:39 发布

阅读量1.3w

点赞数 3

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/AK852369/article/details/99670904

Css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的滚动横幅布局方法，通过设置div为滚动容器，内部包含多个并列显示的图片块，实现了横向滚动展示的效果。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .banner {
        width: 100%;
        height: 100%;
        overflow-x: scroll;
        /*添加横向滚动条*/
        white-space: nowrap;
        /*不换行*/
    }

    .one {
        width: 40%;
        display: inline-block;
        text-align: center;
    }

    .one img {
        width: 50%;
    }
</style>

<body>
    <div class="banner">
        <div class="one">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20200721140444-1.png" alt="图片">
        </div>
        <div class="one">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20200721140444-1.png" alt="图片">
        </div>
        <div class="one">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20200721140444-1.png" alt="图片">
        </div>
    </div>
</body>

</html>