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: some stuff so

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