我怎么能漂浮一堆div并仍然溢出？

Question

这是我的jsfiddle显示我的尝试:

HTML:

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

</div>

CSS:

#container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow-x: auto;
}

.box {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

我希望/希望这个用水平滚动条创建一个长行.相反,boxes到达第二行时到达第二行container.我希望他们继续前进.我怎么能做到这一点？

Answer 1

您可以white-space: nowrap在父级和子级display: inline-block上使用.现场演示(点击).

#container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow-x: auto;
    white-space: nowrap;
}

.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}