CSS - 子のDIVにページ幅を拡大するよう強制する？

Question

私は編集可能なナビゲーションに取り組んでいます。ユーザーは望むように上部に多くのタブを追加できます。タブのセットを強制的に破棄して次の行に折り返すタブがたくさんある場合は、ページ幅が非常に大きくなっても1行にしたいと思っています。

コンテンツがラッパーであっても、子DIVがページ幅を拡張する方法はありますか？私のJS Fiddleのリンクでは、右のsidenavの簡単なラッパーページがあります。私はListamaticタブ（http://css.maxdesign.com.au/listamatic/horizo​​ntal05.htm）を使用しています。ご覧のように、タブは多くの行のタブに分割されており、大きくは見えません。 CSSを使用してDIVを2行目または3行目に折り返さないようにすることはできますか？私はタブの数（およびタブテキストのテキストの長さ）に基づいてDIVを液体にしたいと思います。何か案は？

http://jsfiddle.net/zenfiddle/yUPCC/3/

Answer 1

それは親の過去子を拡大する唯一の方法は、絶対的な幅を使用することです。このようなことをすると、ソートするためにZ-インデックスの問題が発生します。あなたはそのdiv内のタブリストをスクロールするような何かをすることができます。

jsFiddle here

Answer 2

これは、列の上に身体とdisplay: inline-blockにwhite-space: nowrapを使用して行うことができます。一部の列ではvertical-align: topも必要です。

ここにデモがあります。私は、概念を説明するために必要ではないすべてを削除しようとしました。

デモ：http://jsfiddle.net/ThinkingStiff/xauMb/

CSS：

body { 
    white-space: nowrap; 
} 

#container { 
    display: inline-block; 
    vertical-align: top; 
} 

.column { 
    display: inline-block; 
} 

.rightnav { 
    white-space: normal; 
}