幅の広いdivと無制限の幅

Question

私は大きな問題を抱えています！

divデフォルトwidthは、（親の）100%です。コンテンツの幅が100％を超える場合（100％= 1440ピクセル）、divは複数の行にコンテンツを表示します。

私が望む場合、divはその内容を1行に表示しますが、どうすればいいですか？単純なコードを見て::

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

注：内容の幅はわかりません。

私はdisplay: inline;とdisplay: inline-block;とdisplay: table;を試しました。彼らは働かなかった。

注2：私はdisplay: -moz-box;を試しました。それは動作しますが、FIREFOXでのみ！ おかげで...

Answer 1

最も簡単な方法は、親にwhite-space: nowrapを使用することで、子供のdisplay: inline-block：

を参照してください：おそらくあなたdon't want thisのでhttp://jsfiddle.net/4Yv83/

私はまた、overflow-x: autoを追加しました。

Answer 2

div内のテキストを折り返さないように伝えます。

div { 
    white-space: nowrap; 
} 

Answer 3

数年経過しましたが...私はすべての子供の要素を一度に表示する必要がないため、オーバーフローを隠しておく方がよいと思います。私たちはこのようなスタイリングを親指スライドのようなコンポーネントで使用します。だから、親要素に "overflow：hidden"を設定することをお勧めします。

/* for parent element */ 
overflow: hidden;