如何解决HTML按钮在窗口非全屏时移位的问题？

问题现象 #

• 全屏时：顶部导航栏左侧为logo，中间排列HOME、MENU、GIFT SHOP按钮，右侧排列Find a Store、Sign In、Join Now按钮，整体布局整齐。
• 窗口缩小后：中间导航按钮与右侧按钮发生挤压，部分按钮错位换行，布局混乱。

问题根源 #

你当前代码里#headright设置了margin-right:55%，这是固定百分比的外边距，当窗口宽度缩小时，这个外边距会强制占据大量空间，导致中间导航区和右侧按钮区的空间被挤压，按钮被迫换行错位。meta viewport标签主要针对移动端适配，这里的问题是桌面端flex布局的空间分配逻辑不合理，所以单独加viewport无法解决。

修复方案 #

修改CSS，利用flex布局的弹性空间分配替代固定margin，让header的三个模块（logo、中间导航、右侧按钮）自适应窗口宽度：

修改后的完整CSS代码 #

body {
  background-color: #F0EAD6;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  align-items: center;
  background-color: #00704A;
  color: white;
  height: 60px;
  padding: 0 20px;
  /* 强制内部元素不换行 */
  flex-wrap: nowrap;
}

.logo {
  width: 106px;
  height: 64px;
  /* 禁止logo被压缩 */
  flex-shrink: 0;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 20px;
  margin-left: 10px;
  background-color: white;
  color: #00704A;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.19s ease, color 0.19s ease;
  /* 给按钮设置最小宽度，避免过度压缩导致文字错乱 */
  min-width: 80px;
  text-align: center;
}

.button:hover {
  background-color: #00704A;
  color: white;
}

#headright {
  /* 移除导致挤压的固定百分比外边距 */
  margin-right: unset;
  /* 让中间导航区自动填充logo和右侧按钮之外的所有剩余空间 */
  flex: 1;
  /* 让导航按钮在中间区域居中对齐 */
  display: flex;
  justify-content: center;
}

#headleft {
  /* 让右侧按钮保持横向排列 */
  display: flex;
  /* 禁止右侧按钮区被压缩 */
  flex-shrink: 0;
}

修改说明 #

• 移除#headright的margin-right:55%，消除固定百分比带来的空间强制占用问题。
• 给.header添加flex-wrap: nowrap，确保导航栏内的所有元素始终保持横向排列，不会换行。
• 给#headright设置flex:1，让它自动填充logo和右侧按钮区之外的剩余空间，同时用justify-content:center让中间按钮始终居中显示。
• 给.button添加min-width和text-align:center，避免窗口过小时按钮被过度压缩，保证文字显示完整。
• 给#headleft设置flex-shrink:0，确保右侧按钮区不会被压缩变形。

修改后，无论窗口如何缩小，按钮都会保持在各自的区域内，不会出现错位或换行问题。

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