css - 在子元素设置为显示 : inline-block 的元素上禁用 y 滚动

Question

假设我有一个父 div 和一堆子 div

<div id="container">
    <div class="child">stuff</div>
    <div class="child">stuff</div>
    <div class="child">stuff</div>
    <div class="child">stuff</div>
    <div class="child">stuff</div>
    <div class="child">stuff</div>
    etc.
</div>

如何让子 div 水平排列(inline-block)并禁用 overflow-y 滚动条，同时强制子 div 继续生成左右？

http://jsfiddle.net/cpofvohr/

Answer 1

您需要将white-space: pre 或white-space: nowrap 添加到#container 以防止换行。

Updated Fiddle

var div = document.getElementById("container");

for (i = 1; i < 40; i++) {
  var div2 = document.createElement("div");
  div2.className = "child";
  var text = document.createTextNode(i)
  div2.appendChild(text);
  div.appendChild(div2);
}

.child {
  background-color: #D8D8D8;
  height: 375px;
  width: 30px;
  margin: 3px;
  display: inline-block;
}
#container {
  width: auto;
  min-width: 100px;
  max-height: 400px;
  overflow-x: scroll;
  position: relative;
  min-height: 100%;
  white-space: pre;
}

<div id="container"></div>