在网页上，我怎样才能创建一个水平滚动而不是让这个 wap 到下一行？答案

【问题标题】：On a web page, How can i create a horizontal scroll instead of having this wap to the next line?在网页上，我怎样才能创建一个水平滚动而不是让这个 wap 到下一行？
【发布时间】：2014-02-05 04:53:21
【问题描述】：

我有一堆看起来像这样的信息列：

<span style="width:280px;float:left">
     some stuff
<span>

<span style="width:280px;float:left">
     some stuff
<span>

<span style="width:280px;float:left">
     some stuff
<span>

<span style="width:280px;float:left">
     some stuff
<span>

etc . .

鉴于人们有不同的浏览器宽度，如果一个人的显示器宽度较小，一些列最终会换行到下一行。在这种情况下，我希望显示一个水平滚动条并将所有内容保持在同一行。这样做的正确方法是什么？

【问题讨论】：

Stop floating divs from wrapping 的可能重复项

标签： html css horizontal-scrolling

【解决方案1】：

只需将您的 span 元素放入容器中：

<div>
    <span>...</span>
    <span>...</span>
    ...
</div>

然后从您的span 元素中删除float 属性，并将它们设置为display 作为inline-block，并为您的新包含元素提供white-space 或nowrap，以防止它们落入新行：

div {
    white-space: nowrap;
}

div span {
    display: inline-block;
    width: 280px;
}

如果你真的坚持在每个单独的元素上使用 style 属性（这是不好的做法）而不是像我上面使用的那样包含 CSS，这将等于：

<div style="white-space: nowrap;">
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    ...
</div>

【讨论】：

我觉得你应该解释一下为什么用内联块替换浮动。您的方法的一个缺点是跨度之间的间隙大小为空间大小。
@MrLister 因为inline-block 元素被渲染为内联。浮动元素呈现为 blocks，并且不是内联的。 white-space 属性不会对非内联元素产生任何影响。为了摆脱跨度之间的空白，有several things which can be done。