html - 为什么位置：固定；不适用于 justify-content: space-between;?

Question

我想创建一个基本的导航栏，它始终位于页面顶部，即使您滚动也是如此。此外，导航栏的宽度应与其显示的屏幕宽度一样宽。

我目前的尝试是这样的：

CSS：

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background-color:white;
}


#nav-list li {
    list-style: none;
    display: inline-block;
}

#header-img {
    width: 20vw;
}

HTML：

<header id="header">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Logo">
    <nav id="navbar">
        <ul id="nav-list">
            <li><a class="nav-link" href="#function">Function</a></li>
            <li><a class="nav-link" href="#terms">Terms</a></li>
            <li><a class="nav-link" href="#privacy">Privacy</a></li>
        </ul>
    </nav>
</header>

我的尝试得出了这个结果：

但是，如您所见，导航栏并没有填满整个屏幕。三个链接应该推到一边。

我是 HTML/CSS 的新手，我目前知道的唯一可能的解决方法是：

width: 100%;

但我很确定我不应该那样做。谢谢你的回答！:)

标签： htmlcssflexboxcss-position

Answer 1

添加它会给它整个页面的宽度并使其适合页面。

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  background-color: white;
  width: 100%;
  margin: 0 auto;
  top: 0;
  left: 0;
  }