html - CSS |使div向右浮动并向父级添加滚动条

Question

我有一个父级 Div 容器，里面有 5 个 div。 父 div 的宽度为 960px，高度为 320px。内部元素向左浮动并具有固定宽度。

960 宽的父 div 中没有足够的宽度/空间容纳 5 个元素，因此自然而然地使最后一个 div float 到底部。

有没有办法让它向右滑动，加上滚动条水平滚动？

http://puu.sh/qiBKI/3f1d4c944a.png

Answer 1

您可以结合使用 white-space: nowrap 和 display: inline-block 来防止元素被换行。添加 overflow: scroll 父级获取滚动条。这是一个例子:

.parent {
  overflow: scroll;
  background-color: lightblue;
  white-space: nowrap;
 }

.some-child {
  width: 200px;
  display: inline-block;
 }

<div class="parent">
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
</div>

.parent {
  width: 100%;
  overflow: scroll;
}