流体布局中不需要的水平滚动条答案

【问题标题】：unwanted horizontal scroll bar in fluid layout流体布局中不需要的水平滚动条
【发布时间】：2010-08-11 04:53:52
【问题描述】：

http://www.twofivefivefive.com/asctest/

我正在帮助一个朋友做这个网站，它是一个流畅的、基于 % 的设计（我没有使用过它的经验）。

由于某种原因，我得到了一个水平滚动条，它滚动到右侧的空白处。我一点也不知道是什么导致页面比应有的更宽，我已经三次检查了代码，一切似乎都井井有条；我越来越绝望了！

任何帮助将不胜感激。

【问题讨论】：

顺便说一下，在大型显示器上，顶部的“关于 | 另一个页面”链接 (div#topNav) 位于大白框 (div#container) 的右上角如果右边有空间。（如果你没有看到这个，就缩小你的浏览器，假装你有一个更大的显示器。）我认为这是因为前一个节点（div#topTitle）设置了“float：left”。如果您没有在 div#topTitle 上设置“float: left”并将其 margin-top 更改为 padding-top，这应该可以解决问题。但它可能会影响页面上的其他项目（不太可能）。

标签： html css scrollbar fluid-layout

【解决方案1】：

这一切都在<div id="header"> 中。 <div id="topTitle"> 和 <div id="topNav"> 都将 CSS“位置”属性设置为“相对”，然后将“左”属性设置为从页面左侧偏移。但是，元素保持相同的宽度 (100%) 并被推到右侧。

如果你设置“margin-left”而不是“left”，元素将有一个左边距但不会向右推，因为“left”仍然在容器的左边缘（所以 div# topTitle 应该设置 margin-left: 270px; 并且没有设置“left”属性，并且 div#topNav 应该设置 margin-left: 281px; （从“left”属性“迁移”了 261px，另外 20px 已经设置为 margin-left）没有“左”属性。

【讨论】：