调试 CSS 页面溢出答案

【问题标题】：Debugging CSS page overflow调试 CSS 页面溢出
【发布时间】：2023-03-17 09:15:01
【问题描述】：

我的page 向右溢出（有额外的空白空间导致水平滚动条）。 CSS 文件是link to css。

我遵循的做法是 - 一开始，为所有使用的 html 元素设置填充和边距 0。然后，根据我的观察，顶级框的宽度+填充+边距

在相关的说明中，如果 div A 包含 divs B & C，那么 A 的宽度将至少为 max(width(B), width(C))，对吧？

【问题讨论】：

【解决方案1】：

看起来问题出在#mainhmenu 上，宽度为 100%，两边的内边距为 5%

@media (min-width: 1200px)
  #navigation ul {
  padding: 0% 5%;
}

使整体宽度达到 110%。

【讨论】：

需要调整宽度、填充、将overflow-x hidden 添加到body，或者我建议继续使用box-sizing: border-box; paulirish.com/2012/box-sizing-border-box-ftw
感谢 Evan 缩小范围。我今天从你和其他人的回答中学到了一些好东西。
很高兴它有帮助〜每个人都有自己的方法来缩小错误。祝你前进！

【解决方案2】：

我刚刚发布了一个跨浏览器工具，您可以使用它来解决此类问题。只需将鼠标悬停在该区域中的每个元素上即可查看边距、边框和填充，直到找到罪魁祸首！

【讨论】：

【解决方案3】：

从#mainhmenu 中删除width: 100%; :)

【讨论】：

首先，谢谢！现在我下降到那个层次，确实是溢出的原因。我的好奇心是 - 一般如何找到这些问题？ mainhmenu 的父母不应该比 mainhmenu 有宽度吗？或者基本上在调试工具中并非如此，必须单独检查每个元素？
我个人一个一个地删除节点，如果有什么问题我正在尝试修改 CSS 值。
是的，这正是我所做的。打开检查器并从下到上开始工作 - 删除节点直到可以缩小问题范围。

【解决方案4】：

这是你的#mainmenu 它的宽度设置为 100%，侧面有 5% 的填充。如果您摆脱填充或将其宽度设置为 90%，您将解决您的问题

【讨论】：

【解决方案5】：

你可以隐藏水平滚动条，

body{
    overflow-x:hidden;
}

希望这会有所帮助。请理解，一旦您指定了宽度，并且如果向其添加填充，它将添加到元素的整体宽度中。

【讨论】：