CSS横向滚动条实现

王小婷

发布于 2019-10-24 14:32:24

5.1K0

发布于 2019-10-24 14:32:24

需求：当从后端请求多个元素的时候，固定在一个div里面，若是超过div，会出现横向滚动条，限制换行 1：在父级元素中使用：white-space: nowrap，使父级元素中的内容不换行 2：在子级元素中使用：display: inline-block，使自己元素变成行内块元素

例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>div横向滚动条</title>
        <style>
            .healthName {
                width: 900px;
                height: 100px;
                overflow-x: scroll;
                overflow-y: hidden;
                white-space: nowrap;/* 父级元素中的内容不换行 */
            }
            .healthlist {
                display: inline-block;
            }
        </style>
    </head>

    <body>
        <div class="col-md-6  col-sm-6  col-xs-6  healthName">
            <!-- <div class="healthlist">
        <img class="img"  src="images/point.png"/>
        <p>张三丰</p>
        <p>89bpm</p>
        <p>120/78</p>
        </div> -->
        </div>
    </body>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $.ajax({
            url: "health.json",
            data: {},
            type: 'GET',
            success: function(data) {
                var html = "";
                $.each(data, function(i, item) {
                    html += "   <div class='healthlist'>";
                    html += "<img class='img'  src=" + item.image1 + "/>";
                    html += "<p>" + item.doneNum + "</p>";
                    html += "<p>" + item.date + "</p>";
                    html += "<p>" + item.date + "</p></div>";
                })
                $(".healthName").append(html)

            }
        });
    </script>
</html>

json:

[
    {
        "image1": "images/fence/fence1.png",
        "doneNum": 130,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 80,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 110,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 52,
        "date": "120/78"
    }
]

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.10.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

json