使 div 中的 span 可水平滚动答案

【问题标题】：Make spans in div horizontally scrollable使 div 中的 span 可水平滚动
【发布时间】：2015-01-12 18:48:45
【问题描述】：

我在容器内有一个容器 div（固定宽度，向左浮动）和一组跨度（固定宽度和高度）。

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

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

这里是jsFiddle。

提前非常感谢！

【问题讨论】：

标签： html css

【解决方案1】：

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

white-space CSS 属性用于描述空格如何元素内部被处理。

nowrap 像正常一样折叠空白，但抑制换行（文本换行）在文本中。

#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>

【讨论】：

【解决方案2】：

只需添加

white-space:nowrap;

到你的容器 div

在这里摆弄：http://jsfiddle.net/g1e3ztnu/3/

【讨论】：

【解决方案3】：

您在#cont 中设置宽度。删除 width: 500px 到 width : auto;如果你想用你拥有的 widht 强制它，你必须设置一个新规则：white-space: nowrap。

选项 1 - CSS

#cont {
    overflow:auto;
    width:auto;
}

选项 2 - CSS

#cont {
    overflow:auto;
    width: 500px;
    white-space: nowrap;
}

DEMO HERE

【讨论】：