固定トップ位置の浮動小数点

Question

私は、水平に配置されたいくつかのウィジェットを含むHTML「ツールバー」を持っています。各項目は、ソースドキュメント内のdivで表される：私はfloat: leftを使用してdiv要素を配置

<div id="widget1" /> 
<div id="widget2" /> 
<div id="widget3" /> 

。問題は、ユーザーがツールバーの上部に固定して、ユーザーがウィンドウの幅を小さくしても折り返されないようにすることです。代わりに、私はそれらの動作が実際のツールバーのようなものになるように、オーバーフローを隠して水平方向にオーバーフローさせたいだけです。

つまり、私はposition: fixedのようなものが欲しいですが、垂直座標のみが必要です。水平に並べて配置する必要があります。 CSSでこれを行う方法はありますか？

更新ここに私が使用している実際のHTMLがあります。 class="row"のdivsは、ツールバーにウィジェットとして表示され、1行に水平に配置されます。

<div class="row" id="titleRow"> 
    <span class="item"> <img src="../images/logo.png" height="26" /> </span> 
    <span class="item" id="title">Title</span> 
    <span class="item" id="close" onclick="window.close();"> close </span> 
</div> 

<div class="row" id="menuRow"> 
    <span class="item"> <ul id="menu"></ul> </span> 
</div> 

<div class="row" id="searchRow"> 
</div> 

<div class="row" id="pageRow"> 
    <span class="item" id="page-related-data"> Page-related data: </span> 
</div> 

Answer 1

よりもむしろfloat: left;display: inline-block; vertical-align: top;を試してみてください。次に、親要素にwhite-space: nowrap;とoverflow: hidden;を設定します。例については、http://jsfiddle.net/rt9sS/1/を参照してください。

注：inline-blockにはいくつか問題があります。これは空白認識です（HTML内の要素の周りの空白がドキュメントに表示されます）。また、IE6/7ではサポートが限られていますが、要素レイアウト（例： .oldie .widget { display:inline; zoom:1; }。詳細については、http://www.quirksmode.org/css/display.html#inlineblockを参照してください。