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?

回答1:

Simply place your span elements in a container:

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

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;
}

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>

来源：https://stackoverflow.com/questions/21159136/on-a-web-page-how-can-i-create-a-horizontal-scroll-instead-of-having-this-wap-t