Блог

Я впервые пытаюсь создать панель заголовка с навигационными ссылками, используя flexbox. Когда я применяю display: flex к элементу заголовка в CSS, пытаясь выровнять логотип и ссылки по вертикали, навигационные ссылки больше не разнесены (см. Ссылку, чтобы увидеть это). Однако, если я удалю элементы display:flex и align из элемента заголовка в CSS, ссылки навигации будут разнесены, но затем не будут выровнены по вертикали. Я не могу заставить оба произойти (т. е. быть разнесенным и выровненным по вертикали) одновременно. Я перепробовал много комбинаций, но не могу понять, противоречат ли некоторые вещи друг другу! Может быть, проще посмотреть на мою работу здесь:

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;

}



  

Я рекомендую вам использовать только классы, но я понимаю, что это только для целей гибкого обучения, так что пока все в порядке.

Чтобы сделать ваш рабочий день немного проще, вы можете попробовать использовать функцию проверки элементов (я считаю, что chrome inspect element является лучшим, но любой другой тоже подойдет).

Причина, по которой я рекомендую эту функцию, заключается в том, что она упрощает «отладку» и решение.

Например, в вашем случае, когда вы проверяете элемент в теге, вы можете увидеть это:

Вы можете видеть ширину навигационного тега.

Вы пытаетесь выполнить выравнивание между ними, и это действительно работает, но ваша проблема заключается в ширине навигационного тега, если вы дадите навигационному тегу ширину 100%, он будет работать.

Рабочий пример:

 #nav-bar {
    width: 100%;
}
  

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

Опять же, есть лучший способ написать код, которого вы пытаетесь достичь. Попробуйте посмотреть несколько руководств по Flexbox. Я рекомендую видеоролики netninja на youtube.

Добавьте этот фрагмент кода, и все готово.

 #nav-bar{
  width: 100%;
}
  

Откройте ссылку ниже, чтобы увидеть ее в действии. Я добавил приведенный выше фрагмент в ваш код.

https://jsfiddle.net/5cjnzoeu/

Спасибо.