Я пытаюсь расположить элементы в заголовке, отображаемом как flexbox, чтобы изображение (логотип) слева было выровнено по вертикали к нижней части панели навигации справа. Кажется, достаточно просто, однако у меня также есть кнопка поиска, которая должна быть расположена относительно навигации. Когда я делаю это, кнопка поиска, кажется, нажимает навигацию ниже базовой линии flexbox, и никакие отступы или отрицательные поля, кажется, не могут это исправить.
Логотип содержится внутри элемента div, занимающего 40% ширины экрана, а элемент nav внутри элемента div, занимающего 60%. Я сделал снимок экрана и, чтобы проиллюстрировать, я добавил красный фон в div контейнера logos.
Код ниже:
<body>
<header class="pageHead">
<div class="logoBox">
<img class="logo" src="images/Logo.png">
</div>
<div class="headRight">
<nav id="mainNav">
<i class="fas fa-search searchIcon"></i>
<li class="active">Products</li>
<li>Support</li>
<li>About</li>
<li>Contact</li>
<li class="orange">Partners</li>
</nav>
</div>
</header>
</body>
body {
background-color: #f7f7f7;
}
header.pageHead {
display: flex;
align-items: baseline;
padding: 30px 10%;
color: #555;
}
.logoBox{
width: 40%;
}
.headRight {
width: 60%;
}
nav#mainNav {text-align: right;}
nav#mainNav li {
display: inline-block;
padding: 0 0 0 2em;
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
letter-spacing: 0.1em;
}
.searchIcon {
width: 100%;
text-align: right;
}
Любая помощь будет принята с благодарностью. Спасибо.