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

Question

我正在尝试通过单击按钮在另一个<div>中创建<div>。单击按钮时，将创建一个具有唯一 id 的新内部<div>（在外部<div>内）。每个内部<div>都有一个随机的 margin-top CSS 值。所有这些都有效，但我想让外部<div>仅水平滚动。因此，内部<div>都必须内联创建。但是，我不能将display:inline-block用于内部<div>，因为这会删除随机margin-top功能。

（感谢用户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;
}

爪哇语

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;");
}; 

这是工作演示。

如您所见，创建新的内部<div>工作，并且每个内部都有一个随机margin-top。如何使外<div>水平滚动并防止内<div>中断到下一行？

Answer 1

实际上

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

更新的示例

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

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

如果出于某种原因，您坚持浮动元素（我不建议这样做），您只需增加父元素的宽度即可包含子元素。

Answer 2

试试这段代码：

除了inline-block，您还可以使用inline-table

小提琴

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