Javascript 如何使容器div仅水平溢出而不使用"；显示：内联块“；为了它的内部div？

我试图通过点击按钮在另一个

中创建

。单击按钮时，将创建一个具有唯一id的新的内部

（在外部

中）。每个内部

还具有一个随机的

边距顶部

CSS值。所有这些都可以，但我想让外部的

只水平滚动。因此，内部

都必须内联创建。但是，我不能对内部

使用

display:inline block

，因为这会删除随机

边距顶部

功能

（代码帮助归功于）

HTML Javascript 这是你的电话号码

---

如您所见，创建新的内部

s是可行的，并且每个内部

都有一个随机的
边距顶部。如何使外部
水平滚动，并防止内部
中断到下一行？
实际上，您可以使用
内联块
，只需添加
垂直对齐：顶部
，即可正常工作


值得注意的是，
垂直对齐
的默认值是
基线
；这就是为什么
保证金
似乎没有生效的原因

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

如果出于某种原因，您坚持浮动元素（我不建议这样做），您只需增加父元素的宽度，以包含子元素。
请尝试以下代码：

您也可以使用
内联表，而不是
内联块


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

非常感谢。工作完美，今晚我可以睡个好觉了：D
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;");
}; 

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

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