justify-content: space-between导致导航栏最后一项右侧空白如何修复？

开发导航栏时，使用justify-content: space-between属性后，菜单最后一项右侧出现莫名空白，视觉上仿佛右侧还有元素，但实际不存在。

问题根源 #

你的.max-width容器内包含三个子元素：logo、menu、menu-btn，justify-content: space-between会将这三个元素沿主轴分散排列，导致menu被挤在中间区域，与右侧的menu-btn之间产生空隙；同时非sticky状态下的.max-width未设置左右内边距，放大了布局的违和感。

修复方案 #

• 统一内边距，消除布局差异
  给非sticky状态的.max-width添加左右内边距，和sticky状态保持一致：

  .navbar .max-width {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.4s ease-in-out;
    padding: 0 40px; /* 添加统一的左右内边距 */
  }
  
  .navbar.sticky .max-width {
    padding: 10px 40px; /* 仅保留上下内边距的变化 */
  }
  

• 控制汉堡按钮的显示逻辑
  汉堡按钮通常仅在移动端显示，桌面端隐藏，避免干扰布局：

  /* 默认隐藏汉堡按钮 */
  .navbar .menu-btn {
    display: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  
  /* 移动端媒体查询，显示汉堡按钮并隐藏菜单 */
  @media (max-width: 768px) {
    .navbar .menu {
      display: none;
    }
    .navbar .menu-btn {
      display: block;
    }
  }
  

• 清除列表默认样式
  移除ul标签的默认内边距和外边距，避免布局偏移：

  .navbar .menu {
    padding-left: 0;
    margin: 0;
  }
  

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