如何使一行div在另一个div中的一行中流动？

Question

我有一个div"容器",比如400px宽度,里面有一个左浮动的div - "box"100px宽度.有六个"盒子"div,所以它们的汇总宽度大于400px,这导致div行被包裹,我得到两行,每行有4和2个元素.如何让这6个div成为一行,一行而不是两行？

Answer 1

您只需要white-space: nowrap在子元素上使用父元素display: inline-block.现场演示(点击).

  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

CSS:

.container {
  width: 400px;
  background: black;
  white-space: nowrap;
  overflow: scroll;
}

.container > div {
  height: 50px;
  width: 100px;
  background: #555;
  display: inline-block;
  margin: 10px;
}