javascript - 如何使容器 div 仅水平溢出而不对其内部 div 使用 "display:inline-block"？

Question

我正在尝试创建 <div> s在另一个<div>单击一个按钮。单击按钮时，一个新的内部 <div>创建(在外部 <div> 内)具有唯一 ID。各内<div>还有一个随机margin-top CSS 值。所有这些都有效，但我想制作外部 <div> 仅水平滚动。因此，内部<div>所有这些都必须内联创建。但是我不能使用 display:inline-block内部<div>因为那会删除随机的 margin-top功能。

(感谢 user totymedli 以获得代码帮助)

HTML

<button id="button1">Add box</button>
<div id="outer"></div>

CSS

#outer {
position:absolute;
white-space:nowrap;
height:118px;
overflow:auto;
width:100%;
padding:2px;
}

.box{
float:left;
width:48px;
height:48px;
background-color:#000;
margin-left:5px;
}

Javascript

var number = 0;

document.getElementById("button1").addEventListener("click", pressButton, false);

function pressButton() {
    ++number;
    makeDiv(number);
};

function makeDiv(x) {
    var innerDiv = document.createElement("div");
    outer.appendChild(innerDiv);
    innerDiv.className += " box";
    innerDiv.setAttribute("id", "innerDiv" + x);
    innerDiv.setAttribute("style", "margin-top:" + Math.floor(Math.random()*51) + "px;");
}; 

这是 working Demo .

如您所见，正在创建新的内部 <div> s 作品，他们每个人都有一个随机的 margin-top .如何制作外层 <div>水平滚动并防止内部 <div>从换行到下一行？

Answer 1

实际上，您可以使用inline-block，只需添加vertical-align:top，它就会按预期工作。

UPDATED EXAMPLE

值得注意的是，vertical-align的默认值是baseline；这就是为什么 margin 似乎 没有生效的原因。

.box{
    display:inline-block;
    vertical-align:top;
    width:48px;
    height:48px;
    background-color:#000;
    margin-left:5px;
}

如果出于某种原因，您坚持让元素 float (我不推荐这样做)，您只需增加父元素的宽度即可包含子元素。