不同页面导航按钮尺寸不一致问题求助

问题根源分析 #

你的问题出在导航栏的定位与尺寸设置逻辑上：

• <nav>使用了position: absolute，但父元素<header>没有设置position: relative，导致导航栏是相对于整个文档而非header定位，不同页面的文档流差异会引发布局偏移。
• width: 99%搭配margin: 20px会让导航栏实际宽度超出容器（margin是额外宽度），在不同页面中因视口或其他元素影响，拉伸了header的显示尺寸。

具体修复步骤 #

1. 给Header添加相对定位约束 #

修改CSS，让导航栏在Header内部定位：

header {
  position: relative;
  min-height: 130px; /* 适配导航栏top:20px + height:90px的高度 */
}

2. 修正导航栏的尺寸规则 #

调整导航栏的宽度、margin和盒模型，避免超出容器：

nav {
    text-align: right;
    width: 100%;
    height: 90px;
    margin: 20px 0; /* 移除左右margin，避免宽度溢出 */
    padding-right: 15%;
    position: absolute;
    top: 20px;
    box-sizing: border-box; /* 让padding不会额外增加宽度 */
}

3. 统一导航链接的间距（可选） #

如果觉得导航按钮间距过大，可将nav a的margin: 0 4.2em 0.1em 0调整为更适配的单位（比如vw），避免不同屏幕尺寸下的错位：

nav a {
  /* 其他样式保留 */
  margin: 0 2vw 0.1em 0;
}

额外检查点 #

确保所有页面的<header>HTML结构与首页完全一致，没有额外的嵌套标签或页面专属样式覆盖全局CSS。

内容的提问来源于stack exchange，提问作者Summer