CSS横向滚动条实现

2019-10-24 14:32:24 浏览数 (1)

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

例子:

代码语言:javascript复制
<!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:

代码语言:javascript复制
[
    {
        "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"
    }
]

0 人点赞