无法让 justify-content 和 align-items 同时在我的 header 和导航栏上工作

Question

我第一次尝试使用 flexbox 制作带有导航 link 的 header 栏。当我将 display:flex 应用到 CSS 中的 header 元素时，试图垂直对齐徽标和 links，导航 links 不再间隔开（请参阅 link 以了解这一点）。但是，如果我从 CSS 中的 header 元素中删除 display:flex 和 align-items，导航 link 会间隔开，但不会垂直对齐。我无法让两者同时发生（即间隔开并垂直对齐）。我尝试了很多组合，但无法弄清楚某些事情是否相互冲突！在这里查看我的作品可能更容易：

https://codepen.io/ellie1/pen/mdPomWN

或者下面分别是我的html和css。提前致谢！

<header id='header-img'>
  <div class='logo1'>
    <img id='logo'
       src='https://www.clipartkey.com/mpngs/m/61-614698_transparent-headphones-clipart-png-gaming-headset-silhouette.png'/>
  </div>

  <nav id='nav-bar'>
    
    <ul>  
      <li> <a href='' class='nav-link'> Features </a> </li> 
      <li> <a href='' class='nav-link'> Colours </a> </li> 
      <li> <a href='' class='nav-link'> Pricing </a> </li>
    </ul>
       
       </nav>
  
</header>

html{
  font-size= 10px;
}

body{
  background-color: #F7F7F7;
  font-family: system-ui;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header{
  position: fixed;
  min-height: 75px;
  padding: 0px 20px;
  background-color: #212529;
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
}

li{
  list-style: none;
}


nav> ul{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;

}

a{
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  color: #b51b20;
}

 img{
  width: 6%;
  height: auto;
  padding-top: 5px;
  display: flex;
  border-radius: 20px;

}

Answer 1

添加这段代码，一切顺利。

#nav-bar{
  width: 100%;
}

打开下面的 link 以查看实际效果。我将上面的代码片段添加到您的代码中。

https://jsfiddle.net/5cjnzoeu/

谢谢。

Answer 2

我建议你只使用类，但我知道这只是为了 flex-learning 目的，所以暂时没问题。

为了完成您的作品以及未来的作品，您可以尝试使用检查元素功能（我发现 chrome 检查元素是最好的，但其他任何也都可以）。

我推荐这个功能的原因是因为它使事情更容易“调试”和解决。

例如，在您的情况下，当您检查标签上的元素时，您可以看到：

可以看到导航标签的宽度。

您尝试 justify-between，它确实有效，但您的问题是导航标签的宽度，如果您将导航标签的宽度设置为 100%，它将起作用。

一个工作示例：

#nav-bar {
    width: 100%;
}

https://codepen.io/aviv-day/pen/KKzExGw

同样，有一种更好的方法来编写您要实现的代码。尝试观看一些 Flexbox 教程。我在 youtube 上推荐 netninja 视频。

无法让 justify-content 和 align-items 同时在我的 header 和导航栏上工作

Can't get justify-content and align-items to work on my header and navigation bar at the same time

html

css

flexbox

alignment

justify