无法获得理由内容和对齐项目同时在我的标题和导航栏上工作

问题描述

我正在尝试使用flexBox首次制作带有导航链接的标题栏。当我将display：flex应用于CSS的header元素时，为了使徽标和链接垂直对齐，导航链接不再间隔开（请参阅链接以了解此信息）。但是，如果我从CSS的header元素中删除了display：flex和align-items，导航链接将间隔开，但不会垂直对齐。我不能同时发生这两种情况（即，间隔开并垂直对齐）。我尝试了许多组合，但无法弄清楚某些事物是否相互冲突！在这里看我的作品可能会更容易：

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;

}

解决方法

添加这段代码，您就很好了。

#nav-bar{
  width: 100%;
}

打开下面的链接即可查看其运行情况。我已将上述代码段添加到您的代码中。

https://jsfiddle.net/5cjnzoeu/

谢谢。

我建议您仅使用类，但是我意识到这仅是出于灵活学习的目的，所以现在还可以。

为使您的工作以及将来的工作变得可行，您可以尝试使用“检查元素”功能（我认为chrome inspect元素是最好的，但其他任何元素也都可以）。

之所以推荐此功能，是因为它使东西更容易“调试”和解决。

例如，在您的情况下，当您检查代码中的元素时，您会看到以下内容：

您可以看到nav标签的宽度。

您尝试在两者之间进行调整，它确实可行，但是您的问题是nav标签的宽度，如果您将nav标签的宽度设置为100％，则可以使用。

一个工作示例：

#nav-bar {
    width: 100%;
}

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

同样，有一种更好的方法可以编写您要实现的代码。尝试观看一些Flexbox教程。我建议在YouTube上使用netninja视频。

alignment flexbox flexbox html justify