需求：当从后端请求多个元素的时候，固定在一个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" } ]
