本文详解导航栏在窗口缩放时溢出、需横向滚动的问题根源，重点指出过量固定 padding 是主因，并提供基于 flexbox 的弹性解决方案，确保导航项自动换行、等比收缩且保持可读性。
在响应式网页开发中，导航栏（
✅ 正确解法：用 Flexbox 替代 inline-block + 固定 padding
将导航项从 display: inline-block 改为 display: flex 容器 + flex-wrap: wrap，并改用相对单位（如 rem、em）或响应式 padding，才能实现真正的弹性缩放：
/* 替换原 header li 样式 */
header nav ul {
display: flex;
flex-wrap: wrap; /* 关键：允许换行 */
justify-content: center; /* 水平居中对齐 */
gap: 1rem; /* 推荐使用 gap 替代 margin，更可控 */
padding: 0;
list-style: none;
}
header nav li {
flex: 1 1 auto; /* 可伸缩、可压缩、基础尺寸由内容决定 */
min-width: max-content; /* 防止文字被过度挤压（可选） */
text-align: center;
}
header nav a {
display: block;
padding: 0.75rem 1.25rem; /* 合理的相对内边距（非 70px！） */
font-size: 1rem;
text-decoration: none;
color: #000;
transition: background-color 0.4s;
border-radius: 6px;
}
/* 小屏下进一步优化 */
@media (max-width: 48em) {
header nav ul {
flex-direction: column;
align-items: stretch;
}
header nav a {
padding: 0.875rem 1rem; /* 略微收紧，提升小屏密度 */
}
}⚠️ 必须检查的其他隐患点
- #container 的 max-width: 75rem：该值约等于 1200px，在大屏下会限制容器宽度，间接导致内部导航无法充分利用视口。若需全宽导航，请移除或设为 max-width: none。
- *margin-left/right: 10px 在 `#container > ` 上**：这会在左右各加 10px 边距，进一步压缩导航可用宽度，建议仅对需要间距的子元素单独设置。
- 未声明 white-space: nowrap：默认情况下，长文本可能折行破坏导航结构。如需强制单行显示（配合 overflow: hidden 或 text-overflow: ellipsis），请显式添加。
✅ 最终效果验证要点
- 打开浏览器开发者工具 → 切换设备模拟器（如 iPhone SE / Desktop），拖动窗口宽度观察导航是否：
- 在中等宽度下自动换行成两行；
- 在小屏下垂直堆叠；
- 无横向滚动条，无内容截断；
- 检查所有 标签是否始终可点击、无重叠或空白区域；
- 使用 Lighthouse 运行「Accessibility」审计，确认焦点顺序与键盘导航逻辑正常。
通过放弃“固定像素 padding + inline-block”旧范式，转向 flex-wrap + gap + 响应式尺寸，你的导航栏将真正具备流体特性——不仅适配手机与桌面，还能优雅应对平板、折叠屏等新兴设备形态。记住：弹性 ≠ 弹性盒模型本身，而在于所有尺寸单位是否与上下文协同变化。
