#html #css #flexbox
#HTML #css #flexbox
Вопрос:
Я хочу выровнять логотип с левой стороны, а навигационные ссылки с правой стороны по горизонтали.
В основном, я использовал display: flex
.nav-wrapper
и использовал align-items: center
. Тем не менее, по-прежнему наблюдается небольшое несоответствие между логотипом и элементами навигационной ссылки, которые я, похоже, не могу понять, как правильно исправить. Был бы очень признателен за помощь в этом!
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI";
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding-left: 30px;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid blue;
}
.right-menu {
display: flex;
padding-right: 12px;
}
.right-menu .right-menu-items {
display: flex;
}
.right-menu .right-menu-items li a {
padding: 0 12px;
}
.logo {
width: 80px;
height: 80px;
}
.main-wrapper {
background-image: url("/assets/lucrezia-carnelos-gvc7MK4gnDk-unsplash.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
height: 100vh;
width: 100%;
top: 0;
z-index: -1;
}
.main-wrapper .welcome-note {
position: relative;
top: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>italki: Learn a language online</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="nav-wrapper">
<a href="#">
<img src="./assets/white_logo.svg" alt="italki logo" class="logo" />
</a>
<nav class="right-menu">
<ul class="right-menu-items">
<li><a href="#">Log in</a></li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Become a Teacher</a></li>
</ul>
</nav>
</header>
<div class="main-wrapper">
<div class="welcome-note">
<h1>Become fluent in <br />any language</h1>
<p
>Choose from over 10,000 teachers for 1-on-1 lessons based on your
goals and interests</p
>
<input type="text" placeholder="Choose a language" />
</div>
</div>
</body>
</html>
Комментарии:
1. Можете ли вы прикрепить скриншот текущего вывода?
2. Привет! Вот они dropboxlink и dropboxlink
Ответ №1:
Я создал демо, вот ссылка: https://jsfiddle.net/590nartL /
Сделайте это действительно горизонтально по центру, красная граница доказывает это.
Конечно, может быть, вы думаете, что шрифт в красной рамке не вертикальный, вы можете добавить стиль, как показано ниже:
.right-menu {
margin-top: -2px;
}
Любое отрицательное значение поля по вашему желанию.
Ответ №2:
Это происходит потому, что между <img>
тегом и родительским тегом есть ненужный пробел <a>
.
Это <img>
встроенный элемент, так что это произошло.
Чтобы убрать пробел, сделайте <img>
тег block
элементом следующим образом или выполните выравнивание по вертикали.
.logo {
display: block;
width: 80px;
height: 80px;
}
или сделать родительский <a>
стиль гибким
a {
display: flex;
flex-direction: column;
}