0

Есть шапка, в которой есть строковое меню (горизонтальное), логотип и одна кнопка. Нужно, чтобы строковое меню было посередине, логотип слева, а кнопка справа.
Это все в одном блоке <div>.

2 ответа 2

5

Тут можно сделать это несколькими способами. Первый как написал в своем ответе @meine - используя flexbox, следующий способ используя grid, также можно воспользоваться готовыми решениями, используя для этого к примеру тот же Bootstrap 4.
Вот вариант с grid:

.grid-container {
  display: grid;
  grid-template-areas: 'logo grid-menu button'; 
  align-content: center;
}
.grid-container > div {
  background-color:#b1db08;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
}
.logo {
  grid-area: logo;
}
.grid-menu {
  display: grid;
  grid-area: grid-menu;
  grid-template-columns: auto auto auto auto auto;
  align-content: center;
}
.menu-item {
  background-color: #d7db08;
  text-align: center;
  padding: 5px;
  font-size: 14px;
  border: 1px solid gray;
}
.button {
  grid-area: button;
}
.bt {
  padding: 5px;  
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="grid-container">
  <div class="logo"><i class="material-icons">cloud</i></div>
  <div class="grid-menu">
    <div class="menu-item">Главная</div>
    <div class="menu-item">Новости</div>
    <div class="menu-item">О нас</div>  
    <div class="menu-item">Контакты</div>
    <div class="menu-item">Акции</div>
  </div>
  <div class="button">
    <button class="bt">Click</button>
  </div>  
</div>

Сильно со стилями не игрался, главное показать принцип, остальное дело вкуса.

1
  • 1
    Лови плюсик :-)
    – meine
    16 мар 2019 в 10:25
4

.item {
  width: 50px;
  height: 50px;
  background-color: pink;
}

.container {
  display: flex;
  justify-content: space-between;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

2
  • Не совсем понятно, хотел ли автор именно это, но я б ответил так же, лови плюс
    – user262779
    16 мар 2019 в 8:50
  • 1
    Добавил вариант с grid. Ждал что ты добавишь, но не дождался )
    – user262779
    16 мар 2019 в 9:46

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.