如何使固定头部#globalnav内的img与nav元素撑满容器宽度？

问题 #

我有一个带固定头部的全局导航栏，目前的问题是#globalnav里的logo（globalnav-logo）和导航菜单（globalnav-menu）无法撑满容器的最大宽度。我已经把#globalnav-wrapper的max-width设为980px，并通过margin: 0 auto让它居中，但logo和导航菜单没能扩展到容器全宽。

HTML代码 #

<header id="globalnav-container">
    <div id="globalnav-wrapper">
        <div id="globalnav">
            <a href="/" aria-label="Home"><img id="globalnav-logo" src="/images/LogoBlack.png" alt="Logo Black"></a>
            <nav id="globalnav-menu" aria-label="Site navigation">
                <ul id="globalnav-menu-list">
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-web" title="Web Services Dropdown"><a href="#">Web</a></li>
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-mobile" title="Mobile Services Dropdown"><a href="#">Mobile</a></li>
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-desktop" title="Desktop Services Dropdown"><a href="#">Desktop</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

CSS代码 #

#globalnav-container {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: default;
  height: 45px;
  transition: background 0.2s linear, height 0.2s linear;
}

#globalnav-wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#globalnav {
  display: flex;
  align-items: center;
}

#globalnav-logo {
  height: 16px;
  object-fit: contain;
  display: block;
  margin: 0;
}

#globalnav-menu-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.globalnav-menu-list-item {
  padding: 0 10px;
}

#globalnav-menu {
  margin: 0;
}

@supports ((-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px))) {
  #globalnav-container {
    backdrop-filter: saturate(180%) blur(20px);
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}

解决方案 #

问题核心是#globalnav容器默认仅包裹内容宽度，未铺满父容器#globalnav-wrapper的可用宽度，只需做两处调整：

1. 给#globalnav添加width: 100%，让它占满父容器的全部宽度
2. 给#globalnav添加justify-content: space-between，让logo和导航菜单分别靠向左右两端，自然填满整个容器宽度

修改后的CSS代码如下：

#globalnav-container {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: default;
  height: 45px;
  transition: background 0.2s linear, height 0.2s linear;
}

#globalnav-wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 以下是修改的部分 */
#globalnav {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

#globalnav-logo {
  height: 16px;
  object-fit: contain;
  display: block;
  margin: 0;
}

#globalnav-menu-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.globalnav-menu-list-item {
  padding: 0 10px;
}

#globalnav-menu {
  margin: 0;
}

@supports ((-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px))) {
  #globalnav-container {
    backdrop-filter: saturate(180%) blur(20px);
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}

补充说明 #

如果需要导航菜单内部的选项也分散对齐（比如占满菜单自身的宽度），可以给#globalnav-menu-list添加justify-content: space-around或justify-content: space-between，但如果仅需logo和菜单整体撑满#globalnav-wrapper，上述修改已经完全满足需求。

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