Question

I’ve a big problem!

You know, a div default width is 100% (of the parent). And if its content width is more than 100% (100%=1440px), div shows content in multiply lines.

Now, if i want, the div shows its content in one line, what should I do? look at the simple code::

<div>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    <div>ddd</div>
    ......(more than 100 other div, with unknown width)
</div>

NOTE: I don’t know the content width.

I tried display: inline; and display: inline-block; and display: table;. they didn’t work.

NOTE 2: I tried display: -moz-box;. It works, but Only in FIREFOX!
Thanks …

Answer 1

The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:

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

I also added overflow-x: auto, because presumably you don’t want this.