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：

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>

Answer 2

您正在#cont中设置宽度。删除宽度：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

Answer 3

添加

white-space:nowrap;

到您的容器div

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

div中的跨度可水平滚动

3 个答案: