Исправить пункты меню, перекрывающие высоту заголовка - PullRequest
Новая
       4

Исправить пункты меню, перекрывающие высоту заголовка

0 голосов
/ 21 апреля 2020

Я хочу, чтобы мои ссылки зависали только в доступных 50px (высота: 50px), которые находятся в моем заголовке, но занимают больше места, что я делаю не так?

/ Image /

Установка отступа 14px в #main-nav ul li a не является для меня решением. Это становится полной противоположностью с меньшим содержанием внутри ссылки.

Мой HTML документ: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/main.css">
  <title>Document</title>
</head>
<body>
  <header id="main-header">
    <nav id="main-nav">
      <img src="img/logo.png" alt="" class="logo">

      <ul class="main-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

      <ul class="right-menu">
        <li><a href="#">EN</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

Мой CSS: 

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

body {
  background: #EEE;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#main-header {
  background-color: #333;
  height: 50px;
  width: 100%;
}

#main-nav {
  height: 50px;
  width: 90%;
  max-width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#main-nav ul {
  display: flex;
  list-style: none;
}

#main-nav ul li {
}

#main-nav ul li a {
  color: #C2C2C2;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  padding: 15px;
}

#main-nav ul li a:hover {
  background-color: #4B4B4B;
  color: #FFF;
}

#main-nav ul.main-menu {
  flex: 1;
  margin-left: 30px;
}

.logo {
  width: 70px;
}

1 Ответ

0 голосов
/ 21 апреля 2020

Поскольку у вас есть фиксированный набор для внешнего родителя, вам нужно позволить этой высоте распространяться вниз до <a>, а затем центрировать текст внутри него по вертикали. 

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

body {
  background: #EEE;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#main-header {
  background-color: #333;
  height: 50px;
  width: 100%;
}

#main-nav {
  height: 50px;
  width: 90%;
  max-width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#main-nav ul {
  display: flex;
  list-style: none;
  height:100%;
}

#main-nav ul li {}

#main-nav ul li a {
  color: #C2C2C2;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  padding: 15px;
}

#main-nav ul li a:hover {
  background-color: #4B4B4B;
  color: #FFF;
}

#main-nav ul.main-menu {
  flex: 1;
  margin-left: 30px;
}

.logo {
  width: 70px;
}


/* Solution */



/* sinde the li is a flex item it will automatically take the height of it's parent */

#main-nav ul li a {
  /* no need for top and bottom padding anymore */
  padding: 0 15px;
  height: 100%;
  
  
  /* To center the text vertically with respect to the height */
  display: flex;
  align-items: center;
}
<header id="main-header">
  <nav id="main-nav">
    <img src="https://picsum.photos/50" alt="" class="logo">
    <ul class="main-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <ul class="right-menu">
      <li><a href="#">EN</a></li>
    </ul>
  </nav>
</header>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...