在网页上，如何创建一个水平滚动，而不是将此wap下一行？ [英] On a web page, How can i create a horizontal scroll instead of having this wap to the next line?

问题描述

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

I have a bunch of columns of info that look like this:

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

因为人们有不同的浏览器宽度，如果一个人有一个小宽度的显示器，柱子卷起包装到下一行。在这种情况下，我会想要一个水平滚动条显示，并保持一切在同一行。

given that people have different browser widths, if a person has a monitor with a small width, some of the columns wind up wrapping to the next line. In this case, i would want a horizontal scroll bar to show up and keep everything on the same line. What is the correct way of doing this?

推荐答案

只需将 span 容器中的元素：

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

然后将 float code> span 元素，而将它们设置为 display 为 inline-block 并为您的新的包含元素添加 nowrap 的白色空格，以防止它们落入新行： / p>

Then remove the float property from your span elements, and instead set them to display as inline-block and give your new containing element a white-space of nowrap to prevent them from falling onto a new line:

div {
    white-space: nowrap;
}

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

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

If you really insist on using the style property on each individual element (which is bad practice) instead of including CSS like I've used above, this would be equal to:

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

这篇关于在网页上，如何创建一个水平滚动，而不是将此wap下一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！