css - 具有固定顶部位置的 float div

Question

我有一个 HTML“工具栏”，其中包含许多水平排列的小部件。每个元素都由源文档中的 div 表示:

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

我使用 float: left 定位 div。问题是我还希望将它们固定到工具栏的顶部，以便在用户减小窗口宽度时它们不会环绕。相反，我只希望它们水平溢出( overflow hidden )，以便其行为类似于真正的工具栏。

换句话说，我想要类似 position: fixed 的东西，但只针对垂直坐标。在水平方向上，它们应该一个接一个地排成一排。有没有办法用 CSS 做到这一点？

更新 这是我使用的真实 HTML。带有 class="row" 的 div 应该作为小部件出现在工具栏中，水平排列在一行中。

<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;垂直对齐:顶部；。然后在父元素上设置white-space: nowrap;和overflow: hidden;。参见 http://jsfiddle.net/rt9sS/1/举个例子。

注意 inline-block 有一些问题。它是空白区域感知的(因此 HTML 中元素周围的空白区域将在文档中可见)。它在 IE6/7 中的支持也有限，尽管您可以通过提供元素布局来解决这个问题，例如.oldie .widget { 显示:内联；缩放:1； }。参见 http://www.quirksmode.org/css/display.html#inlineblock了解更多。