水平溢出div框与滚动

Question

我正在努力实现我们使用pre或其他一些文本内容元素获得的效果，它允许内容溢出（除非）我们将其定义为否则。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  aaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaa

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

我正在尝试使用一些div框，但它似乎不起作用，我已经尝试了浮动，只有它的工作实例是当我将内部元素宽度明确地设置为非常大的东西时，例如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

取下盒子上的浮子并改用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>

Answer 2

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>