2

水平方向に配置された多数のウィジェットを含むHTML「ツールバー」があります。div各アイテムは、ソースドキュメントではで表されます。

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

を使用してdivを配置しfloat: leftます。問題は、ユーザーがウィンドウの幅を狭めた場合に折り返されないように、ツールバーの上部に固定することも必要なことです。代わりに、動作が実際のツールバーのようになるように、（オーバーフローを非表示にして）水平方向にオーバーフローさせたいだけです。

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

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

<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>
4

2 に答える 2

2

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

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

于 2012-04-27T10:40:47.173 に答える
0

私はこれが古い質問であることを知っています、それに出くわす人々のために簡単なjqueryの答えを追加したかったです。

$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});

ページを高くまたは低くするには、$（document）.scrollTop（）に追加するだけです。

私のために働く

于 2020-04-10T19:30:44.073 に答える