CSS Fix container and overflow elements

Question

Iam wondering if it is a way to force overflow elements of an fixed container to be on the same line instead of going on a new line.

http://jsfiddle.net/vrSRE/3/

Thank you.

Answer 1

Yes, there's a way.

You have to replace, float: left with display: inline-block, and add white-space: nowrap to the parent element:

See: http://jsfiddle.net/vrSRE/4/

ul {
    width: 300px;
    height: 30px;
    background: red;
    white-space: nowrap
}
li {
    display: inline-block
}

If you don't want any space between the elements, the easiest way to fix this new problem is to remove the whitespace in the HTML, like this:

• http://jsfiddle.net/vrSRE/6/

For other options that you probably don't care about to remove the space, see:

• How to remove the space between inline-block elements?

And lastly, if you care about IE7 support, use this:

• http://jsfiddle.net/vrSRE/7/

Answer 2

See: http://jsfiddle.net/keBFd/

You can use white-space: nowrap and display: inline - you might not want display: inline, though.