Хочу чтобы лого был на одной строке с меню, я это сделал.
Не подумайте, что это оскорбление, но я не увидел картинку и меню на одной строке.
Здесь я привел пример как Вы можете выстроить свой код, а снизу я расскажу в общем о выстраивании элементов в 1 линию/строку.
Все рассматривать не буду, расскажу только об основных, которые чаще всего используются на практике и хорошо себя зарекомендовали, для каждой задачи подход может быть разным.
Выровнить элементы в одну строку можно несколькими способами:
display: inline-block;
- данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. ВНИМАНИЕ! Если не установить свойство width
, блоки примут по умолчанию значение ширины всей страницы и от свойства display
не будет ни какого толку. Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block
при этом между ними не будет других элементов, с отличным от данного, свойством.
Пример:
.block {
height: 100px;
width: 100px;
border: 3px solid red;
display: inline-block;
}
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
float: left/right;
- Аналогичное по результату display: inline-block
, но отличное по принципам работы свойство float
— в переводе с английского означает — обтекание. Если мы изменим наш предыдущий пример, то результат окажется точно таким же, но важное отличие состоит в том что данное свойство достаточно назначить одному элементу, а следующий в независимости от свойств встанет в одну строку с ним. Но это сработает только с заполненными элементами типа <p>
с текстом внутри, а в данном случае элемент без свойства float
встанет в тоже самое место что и предыдущий элемент. Для того что бы его подвинуть необходимо использовать margin-right
Пример:
.block {
height: 100px;
width: 100px;
border: 3px solid red;
float: left;
margin-right: 30px;
}
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
display: flex;
- c помощью Flexbox
можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю. Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси. Так же следует иметь в виду, что при использовании Flexbox
для внутренних блоков не работают float
, clear
и vertical-align
, а так же свойства, задающие колонки в тексте. И теперь родительскому(.container
) элементу добавляем display: flex;
.
Внутренние div
-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.
Пример:
.container {
display: flex;
}
.block {
height: 100px;
width: 100px;
border: 3px solid red;
margin-right: 30px;
}
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
Главную суть выстраивания элементов я передал, подробнее Вы сможете почитать в интернете. Снизу я приложу ссылки.
Подробнее о свойстве display: flex;
Вы можете почитать перейдя по этой ссылке.
Свойство display: inline-block;
ссылка
Свойство float: left/right;
ссылка
.lab