2

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

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

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

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

更新这是我正在使用的真实 HTML。divs带有的sclass="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;和。有关示例，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。

于 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 回答