Html 导航栏左/右移动

我有两个简单的页面。唯一改变的是标签中的内容

但导航栏在两个页面上的位置并不完全相同。它位于about.html页面的左侧。在我的电脑上，导航栏的偏移量约为4倍，我需要打开两个选项卡并在它们之间切换以查看问题

我用最新的Chrome和Firefox浏览器进行了测试。只有在浏览器处于全屏状态的计算机上才会出现此问题

在使用Chrome调试之后，我发现了一些奇怪的东西。 在主页上，html标签是1513px witdh，而另一个页面的宽度是1496px

主页

纳布洛 html{ 背景色：白色； } 身体{ 保证金：自动； 填充：20px； 最大宽度：720px； 文本对齐：左对齐； 背景色：透明； 单词包装：打断单词； 溢出包装：断开单词； } a{ 颜色：3273dc； 文字装饰：无； } a:悬停{ 颜色：63ccff； } a:参观了{ 颜色：8559da； } h2 a{ 字体大小：400； 颜色：000； 文字装饰：无； } 导航a{ 右边距：10px； } 页脚{ 填充：25px； 文本对齐：居中； } 纳布洛 你好 Nablo是一种轻型静态站点生成器。它是：

光 快速的 制造♥ 使用nablo

---

与设置的裕度不同：自动；它会自动将正文居中，但对于其中一个页面，内容越长，宽度就越小。。这就是区别

然而，其中一个主页页面的高度超过1000px，而另一个关于页面的页面高度非常低

如果将以下内容添加到css html标记中：

html{
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

要强制垂直滚动始终可见，您将使页面相同且不移动

您可以通过添加与最长页面内容相关的最小高度值来实现相同的效果，该值通常是未知值，对于每个访问者，它可能会根据屏幕大小而有所不同。

这是什么原因造成的？ 移动的不仅仅是你的导航栏，还有你全身的元素。此外，它看起来只是在移动，但实际上它在按预期工作。body边距上的值auto将始终位于body元素的中心

主页没有任何滚动条，但“关于”页面的右侧有一个垂直滚动条。滚动条占据html元素的一些宽度。因此，主页和about页面中html元素的宽度是不同的。例如，在我的计算机屏幕上，主页中的html元素的宽度为1149px。同时，about页面中的html元素的宽度为1132px。如您所见，about页面中的html宽度较小。请注意，滚动条的宽度可能不同，但在我的例子中，它的宽度为17px

因此，我的html元素在about页面中的宽度较小。那又怎么样？这会导致主页和about页面中边距的自动值不同，因为about页面需要较少的边距来居中body元素。因此，身体元素似乎在移动

解决方案1 我们能做什么？最明显的解决方案是直观地隐藏滚动条。您可以通过赋予html元素来实现这一点。这仍然允许用户使用鼠标滚轮滚动，但是你不能再拖动滚动条了，因为它在视觉上不存在。在浏览器中运行这两个代码段，body元素不应移动

纳布洛 html{ 背景色：白色； } 身体{ 保证金：自动； 填充：20px； 最大宽度：720px； 文本对齐：左对齐； 背景色：透明； 单词包装：打断单词； 溢出包装：断开单词； } a{ 颜色：3273dc； 文字装饰：无； } a:悬停{ 颜色：63ccff； } a:参观了{ 颜色：8559da； } h2 a{ 字体大小：400； 颜色：000； 文字装饰：无； } 导航a{ 右边距：10px； } 页脚{ 填充：25px； 文本对齐：居中； } 纳布洛 你好 Nablo是一种轻型静态站点生成器。它是：

光 快速的 制造♥ 使用nablo

---

您是否使用chrome DevTools Inspector尝试解决问题？@j08691我添加了代码段，但使用Lilte屏幕时没有问题。只有电脑屏幕。@ChrisL是的，但我不知道如何在两页之间调试这种问题。它在两页之间的位置完全相同me@ChrisL在计算机上的整页不是堆栈溢出预览？我在帖子中添加了一个编辑。在我的网页浏览器上，这两个页面的大小不同。html标记的宽度为1513px，而在另一个页面上为1496px。我不明白为什么。