@a007mr
Учусь разработке HTML/CSS/Javascript

Как правильно расположить лого, навигацию и кнопку в горизонтальном меню?

Делаю горизонтальное меню с тремя элементами (лого, элементами меню и кнопкой). Не получается их выравнять в один ряд. Они располагаются друг под другом, хотя использую display: inline-block.
Подскажите, пожалуйста, что делаю не так.

Ссылка на меню здесь.

Вот код:
.nav-container {
	display: inline-block;
	z-index: 10;
}

.logo {
	display: inline-block;
	vertical-align: top;
	width: 173px;
	height: 51px;
	margin-top: 4px;
}

.menu {
	padding: 0;
	margin: 0;
	list-style: none;
}

.menu li {
	display: inline-block;
	margin-right: 25px;
}

.btn-nav {
	display: inline-block;
	border: 1px solid;
	width: 160px;
	height: 45px;
	background-color: red;
	border-radius: 5px;
	vertical-align: top;

	text-align: center;
	font-size: 0.9em;
	color: #ffffff;
	padding-top: 12px;
	box-shadow: ;
}


Думал про float: left, но вроде должно же работать и без этого.
  • Вопрос задан
  • 170 просмотров
Решения вопроса 1
LenovoId
@LenovoId
what the fuck ?
https://codepen.io/topicstarter/pen/yGzRpB примерно так , смотрите
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
WWHW Санкт-Петербург
от 40 000 до 100 000 руб.
Sveak Барнаул
от 50 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.