html - 在网页上，我如何创建水平滚动而不是让这个 wap 到下一行？

Question

我有一堆信息列，如下所示:

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

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

Answer 1

只需将您的 span 元素放入容器中即可:

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

然后从 span 元素中删除 float 属性，并将它们设置为 display as 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>