html - 带滚动条的水平溢出 div 框

Question

我正在尝试实现我们使用 pre 或其他一些文本内容元素获得的效果，它会让内容溢出(除非)我们将其定义为其他方式。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  aaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaa

如上。用户必须向右或向左滚动才能显示内容。

我正在用几个 div 框尝试它，但它似乎不起作用，我试过 float，只有当我将内部元素宽度明确设置为非常大的值时它才起作用大，像 200%

body {
  max-width: 640px;
}

.parent {
  position: relative;
  height: 180px;
  overflow-x: scroll;
}

.inner {
  position: absolute;
  left: 0;
  right: 0;
}

.box {
  width: 150px;
  height: 150px;
  background-color: #222;
  margin: 10px;
  float: left;
}

<div class="parent">
  <div class="inner">
    <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 class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

示例:http://jsbin.com/hurewo/edit?html,css,output

Answer 1

移除盒子上的 float 并使用 display:inline-block; 代替。然后在父内部 div 添加 white-space: nowrap;

body {
  max-width: 640px;
}

.parent {
  position: relative;
  height: 180px;
  overflow-x: scroll;
}

.inner {
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
}

.box {
  width: 150px;
  height: 150px;
  background-color: #222;
  margin: 10px;
  display:inline-block;
}

<div class="parent">
  <div class="inner">
    <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 class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>