CSS实现横向滚动-x轴滚动

最新推荐文章于 2024-05-24 17:17:32 发布

Mitin_

最新推荐文章于 2024-05-24 17:17:32 发布

阅读量3.5k

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/Mitin_/article/details/127655416

版权

实现横向滚动的核心要素

1，父元素

需要明确的宽度，
设置overflow-x:scroll
设置white-space:nowrap;
注意：滚动元素内请勿添加浮动元素等

2，代码演示

css部分代码

.spec-box {
            width: 100%;
            box-sizing: border-box;
            margin-top: 13px;
            overflow: hidden;
            overflow-x: scroll;
            white-space: nowrap;
            display: flex;
            flex-direction: column;
        }

        .row {
            display: inline-block;
            overflow: hidden;
            height: 40px;
            width: 200%;
        }

        span {
            display: inline-block;
            font-size: 16px;
            font-family: MicrosoftYaHei;
            color: #333333;
            margin-right: 20px;
        }

        .spec-name {
            display: inline-block;
            height: 12px;
            width: 180px;
            padding-right: 10px;
        }

html部分代码

 <div class="spec-box">
            <div class="row">
                <span class="spec-name">Height</span>
                <span>135cm</span>
                <span>135cm</span>
                <span>135cm</span>
                <span>135cm</span>
                <span>135cm</span>
                <span>135cm</span>
            </div>
            <div class="row">
                <span class="spec-name">Height</span>
                <span>135cm</span>
                <span>135cm</span>
                <span>135cm</span>
                <span>135cm</span>
                <span>135cm</span>
                <span>135cm</span>
            </div>

            <div class="row">
                <span class="spec-name">Net weight</span>
                <span>33.5kg</span>
                <span>29kg</span>
                <span>29kg</span>
                <span>29kg</span>
                <span>33.5kg</span>
                <span>33.5kg</span>
            </div>
            <div class="row">
                <span class="spec-name">weight after packaging</span>
                <span>33.5kg</span>
                <span>29kg</span>
                <span>29kg</span>
                <span>29kg</span>
                <span>33.5kg</span>
                <span>33.5kg</span>
                <span>33.5kg</span>
            </div>
        </div>