0

Столкнулся с проблемой выравнивания li c картинкой. Каждый раз когда пытаюсь выровнять картинки по левой стороне, а ссылки по правой, они все больше уезжают друг от друга.

.navbar {
position: absolute;
top: 0;
z-index: 2;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-around;
align-content: center;
width: 100%;
height: 100px;
margin: 5px;
}

.navbar > div {
  display: inline-block;
}

.home-button a img {
  border: 3px solid white;
  width: 180px;
  height: 80px;
  margin: 0;
}

.navbar-info ul{
  margin: 0;
}

.navbar-info li {
  list-style-type: none;
  padding-bottom: 7px;
}

.navbar-info a {
  text-decoration: none;
  color: var(--green);
  font-size: 1.3em;
}

.navbar-info li img {
  width: 20px;
  height: 20px;
}
<nav class="navbar">

    <div class="navbar-info" style="visibility: hidden;">
      <ul>
        <li>
          <!-- <img src="svg/telephone.svg" alt=""> -->
          <a href="#number">84955100075</a>
        </li>
        <li>
          <!-- <img src="svg/instagram.svg" alt=""> -->
          <a href="https://www.instagram.com/textile2day/">@Textile2day</a>
        </li>
        <li>
          <!-- <img src="svg/email.svg" alt=""> -->
          <a href="mail">[email protected]</a>
        </li>
      </ul>
    </div>


    <div class="home-button">
      <a href="#home"><img src="img/logo.png" alt=""></a>
    </div>


    <div class="navbar-info">
      <ul>
        <li>
          <img src="svg/telephone.svg" alt="">
          <a href="#number">84955100075</a>
        </li>
        <li>
          <img src="svg/instagram.svg" alt="">
          <a href="https://www.instagram.com/textile2day/">@Textile2day</a>
        </li>
        <li>
          <img src="svg/email.svg" alt="">
          <a href="mail">[email protected]</a>
        </li>
      </ul>
    </div>
</nav>

1 ответ 1

0
.navbar-info li {
    list-style-type: none;
    padding-bottom: 7px;
    float: left;
    clear: left;
}

Ваш ответ

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

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