html - 使 div 中的 span 水平滚动

Question

我有一个容器 div(固定宽度，向左浮动)和容器内的一组跨度(固定宽度和高度)。

<div id="cont">
    <span class="box">1</span>
    <span class="box">2</span>
    <span class="box">3</span>
    ...
</div>

当达到容器的宽度时，跨度被分成新的一行。我怎样才能让它们并排排成一排，并且该区域可以水平滚动？

这是 jsFiddle .

非常感谢!

Answer 1

只需添加 white-space:nowrap;到#cont:

The white-space CSS property is used to to describe how white spaces inside the element is handled.

nowrap collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

#cont {
  overflow: auto;
  width: 500px;
  float: left;
  white-space: nowrap;
}
.box {
  background-color: #BBBBBB;
  height: 100px;
  display: inline-block;
  margin: 5px 4px 5px 10px;
  width: 100px;
}

<div id="cont">
  <span class="box">1</span>
  <span class="box">2</span>
  <span class="box">3</span>
  <span class="box">4</span>
  <span class="box">5</span>
  <span class="box">6</span>
  <span class="box">7</span>
</div>

---