需求:当从后端请求多个元素的时候,固定在一个div里面,若是超过div,会出现横向滚动条,限制换行
1:在父级元素中使用:white-space: nowrap,使父级元素中的内容不换行
2:在子级元素中使用:display: inline-block,使自己元素变成行内块元素
例子:
div横向滚动条.healthName {
width: 900px;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;/* 父级元素中的内容不换行 */
}
.healthlist {
display: inline-block;
}
$.ajax({
url: "health.json",
data: {},
type: 'GET',
success: function(data) {
var html = "";
$.each(data, function(i, item) {
html += "
html += "";
html += "
" + item.doneNum + "
";html += "
" + item.date + "
";html += "
" + item.date + "
})
$(".healthName").append(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"
}
]