Блог

Я работаю над адаптированной версией руководства по flask.

Вот проблемная часть моего HTML-файла (упрощенная) —

 nav {
  background: lightgray;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}

nav h1 {
  flex: auto;
  margin: 0;
}

nav h1 a {
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li a,
nav ul li,
header .action {
  display: block;
  padding: 0.5rem;
} 

 <nav>
  <h1><a href="index.html">My web app</a></h1>
  <ul>
    <li>Not logged in</li>
    <li><a href="login.html">Log In</a></li>
  </ul>
</nav> 

Проблема в том, что Not logged in текст расположен выше, чем Log In ссылка. Если я окружу Not logged in текст элементом привязки, он выровняется по горизонтали со Log In ссылкой.

В инспекторе Firefox и Not logged in текст, и Log In ссылка имеют идентичные стили display: block; padding: 0.5rem; list-style: none; font-family: sans-serif , за исключением того, что Log In у ссылки есть один дополнительный стиль color: #377ba8 . Однако модель Not logged in текстового поля имеет высоту границы 35 (без учета отступов) по сравнению с 19 для Log In ссылки. Почему они разные?

Почему Not logged in текст не выровнен по вертикали со Log In ссылкой?

Вы не должны добавлять отступы в nav ul li a . Он действовал как вложенное заполнение и, следовательно, разница в выравнивании.

 nav {
  background: lightgray;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}

nav h1 {
  flex: auto;
  margin: 0;
}

nav h1 a {
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li, /* Removed anchor selector */
header .action {
  display: block;
  padding: 0.5rem;
} 

 <nav>
  <h1><a href="index.html">My web app</a></h1>
  <ul>
    <li>Not logged in</li>
    <li><a href="login.html">Log In</a></li>
  </ul>
</nav> 

 nav ul li a, nav ul li, header .action {
  display: block;
  padding: 0.5rem;
}
 

nav ul li a, nav ul li это дважды добавляет отступы к вашему логину

решение

 nav ul li, header .action {
  display: block;
  padding: 0.5rem;
}