无法同时在我的标题和导航栏上使用 justify-content 和 align-items

Posted 2023-03-05

技术标签:

【中文标题】无法同时在我的标题和导航栏上使用 justify-content 和 align-items【英文标题】：Can't get justify-content and align-items to work on my header and navigation bar at the same time 【发布时间】：2021-01-12 18:38:42 【问题描述】：

我第一次尝试使用 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;

【问题讨论】：

将 width:6% 更改为 width:80px（使用 px） 【参考方案1】：

我建议你只使用类，但我知道这只是为了灵活学习，所以现在还可以。

为了使您的工作和未来的工作，您可以尝试使用 Inspect Element 功能（我发现 chrome inspect element 是最好的，但任何其他的也可以）。

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

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

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

您尝试在两者之间进行调整，它确实有效，但您的问题是导航标签的宽度，如果你给导航标签 100% 宽度，它会起作用。

一个工作示例：