Помощь в отступах и позиционировании

319

29 октября 2017, 18:29

Получается создал 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>

Answer 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>