0

Получается создал 3 пункта меню но не могу правильно задать отступы и спозиционировать элементы списка.

Должно быть примерно вот так введите сюда описание изображения А получается как-то так

/*Menu*/
ul{
    list-style: none;
}


.menu{
    display: flex;
}

.menu .logo{
    margin-top: -60px;
}

.menu .left, .right{
    margin-top: 37px;
}

.menu-left{
    display: flex;
}

.menu-left li{
    padding-left: 60px;
}

/*End Menu*/
  <div class="menu">
      <div class="left">
       <img src="https://cdn1.savepice.ru/uploads/2017/10/28/83b135cfdc9eea5ce20195d221219593-full.png" alt="">
        <ul class="menu-left">
            <li>Home</li>
            <li>About Us</li>
            <li>Our Services</li>
        </ul>
       </div>
        <div class="logo">
        <img src="https://cdn1.savepice.ru/uploads/2017/10/28/d49b8a8dd84df67c992ae6d9b29df414-full.png" alt="">
        </div>
        <div class="right">
        <img src="https://cdn1.savepice.ru/uploads/2017/10/28/4acd55dc3946c974543f1803b31d69a3-full.png" alt="">
        </div>
    </div>
    

введите сюда описание изображения

1 ответ 1

1

Круги возле елементов списка сделайте через after

/*Menu*/
.block {
  padding: 10rem;
  width: 100%;
}
ul {
  list-style: none;
  margin: 0;
}

.menu {
  display: flex;
  background: #c7c7c7;
  position: relative;
  justify-content: space-between;
  height: 70px;
}

.menu .logo {
  margin-top: -97px;
  position: absolute;
  left: 50%;
  margin-left: -114px;
  padding: 1rem;
  background-color: white;
  border-radius: 50%;
}
.menu__list {
  flex-basis: calc(50% - 117px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
      box-sizing: border-box;
}

/*End Menu*/
<div class="block">
  <div class="menu">
    <ul class="menu__list menu__list--left">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <div class="logo">
          <img src="https://cdn1.savepice.ru/uploads/2017/10/28/d49b8a8dd84df67c992ae6d9b29df414-full.png" alt="">
    </div>
    <ul class="menu__list menu__list--right">
            <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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