页面缩放时导航栏无法适配屏幕，如何保持内容居中？

问题分析 #

导航栏在页面缩小时变窄，核心原因是导航栏未设置宽度为100%，无法继承父容器的可用宽度；同时当前flex布局未合理分配空间，导致元素无法自适应页面变化。

修改方案 #

以下是调整后的代码，同时满足导航栏适配页面宽度、body内容居中的需求：

CSS 代码

* {
  box-sizing: border-box;
}

body, html {
  padding: 0;
  margin: 0 auto;
  width: 100%; /* 确保页面宽度适配视口 */
  max-width: 1920px; /* 限制最大宽度，避免内容过宽 */
}

.navigation-bar {
  height: 70px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  width: 100%; /* 导航栏占满父容器宽度 */
  justify-content: space-between; /* 让logo和按钮容器分别居左、居右 */
  padding: 0 20px; /* 左右内边距，避免内容贴边 */
}

.button-container {
  display: flex;
  gap: 12px; /* 按钮之间的间距 */
}

HTML 代码

<div class="navigation-bar"> 
    <div class="logo">Gezy</div>
    <div class="button-container">
        <div class="join-now"><button>Join Now</button></div>
        <div class="log-in"><button>Log In</button></div>
    </div> 
</div>

关键修改点说明 #

• 给body, html添加width: 100%，确保页面能自适应视口宽度，同时保留max-width:1920px和margin:0 auto实现内容居中。
• 给.navigation-bar设置width:100%，让导航栏占满父容器的可用宽度，解决缩小页面时导航栏变窄的问题。
• 使用justify-content: space-between让logo和按钮容器分别对齐导航栏的左右两端，优化布局结构。
• 给.button-container添加flex布局和gap属性，让按钮并排且保持合理间距，提升视觉效果。

内容的提问来源于stack exchange，提问作者Furkan Güler