在带有溢出的 div 中在 x 轴上滚动

Question

我想把很多children-divs放在一个parent-div. 父级具有固定宽度。孩子们向左漂浮，将在溢出中。

应该可以在 x 轴上滚动。

但是在尝试这样做时，孩子们会到达下一行并且不会在 x 方向上溢出。

我写了一个小样笔，也许我是瞎子。。

在带有溢出的 div 中在 x 轴上滚动

Answer 1

这可以通过在父 div 上添加white-space:nowrap然后移除float:left并向子级添加display:inline-block来实现。

http://codepen.io/anon/pen/ggpKGO

html, body {
  width: 100%; height: 100%;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  text-transform: uppercase;
}
.parent {
  position: absolute;
  width: 80%; height: 300px;
  left: 20%; top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  padding: 30px;
  overflow-x: scroll;
  background: #f5f5f5;
  white-space: nowrap;
}

.child {
  width: 200px; height: 100%;
  margin-right: 30px;
  padding: 25px;
  box-sizing: border-box;
  background: #3b3b3b;
  display:inline-block;
}

<div class="parent">
  <div class="child">Child #1</div>
  <div class="child">Child #2</div>
  <div class="child">Child #3</div>
  <div class="child">Child #4</div>
  <div class="child">Child #5</div>
  <div class="child">Child #6</div>
  <div class="child">Child #7</div>
</div>