我有一个 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>
最佳答案
而不是 float: left;
尝试 display: inline-block;垂直对齐:顶部;
。然后在父元素上设置 white-space: nowrap;
和 overflow: hide;
。请参阅http://jsfiddle.net/rt9sS/1/举个例子。
注意inline-block
有一些问题。它具有空白感知功能(因此 HTML 中元素周围的空白将在文档中可见)。它在 IE6/7 中的支持也很有限,尽管您可以通过提供元素布局来解决这个问题,例如.oldie .widget { 显示:内联;缩放:1; }
。请参阅http://www.quirksmode.org/css/display.html#inlineblock了解更多。
关于css - 顶部位置固定的 float div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10348752/