具有固定顶部位置的浮动div

Question

我有一个HTML“工具栏”，其中包含许多水平排列的小部件。每个项目在源文档中均由div表示：

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

我使用float: left定位div。问题在于，我还希望将它们固定在工具栏的顶部，这样，如果用户减小窗口的宽度，它们就不会缠绕。相反，我只希望它们水平溢出（隐藏溢出），以便其行为类似于真实工具栏的行为。

换句话说，我想要类似position: fixed的东西，但仅用于垂直坐标。在水平方向上，它们应该一个接一个地放置。 CSS有什么办法做到这一点？

更新这是我正在使用的真实HTML。具有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>

Answer 1

而不是float: left;，请尝试display: inline-block; vertical-align: top;。然后在父元素上设置white-space: nowrap;和overflow: hidden;。有关示例，请参见http://jsfiddle.net/rt9sS/1/。

Answer 2

我知道这是一个老问题，想为运行它的用户添加一个简单的jquery答案。