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>

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

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

1 个答案: