1

Добавил напротив иконок ссылки,добавил отступы иконкам в ,но ссылки идут не ровно в столбец. Полагаю из за разного размера иконок. Как можно их выравнять не используя Пробел?

    <h3>Contact</h3>
    <ul>
        <li><i class="fa fa-map-marker"></i> London, UK 441</li>
        <li><i class="fa fa-phone"></i>Phone: +7 526 268 52 56</li>
        <li><i class="fa fa-envelope"></i>Email: [email protected]</li>
        <li><a href="#"><i class="fa fa-instagram"></i> Our Instagram </a></li>
        <li><a href="#"><i class="fa fa-facebook"></i> We are on facebook </a></li>
        <li><a href="#"><i class="fa fa-twitter"></i> Our twetter </a></li>
        <li><a href="#"><i class="fa fa-google-plus"></i> We are on Google+ </a></li>
    </ul>

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

1
  • Установи иконкам одинаковую ширину
    – Yuri
    20 янв 2017 в 11:05

3 ответа 3

1

ul {
  padding-left: 0;
  list-style: none;
}
ul>li {
  padding-left: 30px;
  position: relative;
}
ul>li i {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  /*text-align: center;*/
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<h3>Contact</h3>
<ul>
  <li><i class="fa fa-map-marker"></i> London, UK 441</li>
  <li><i class="fa fa-phone"></i>Phone: +7 526 268 52 56</li>
  <li><i class="fa fa-envelope"></i>Email: [email protected]</li>
  <li><a href="#"><i class="fa fa-instagram"></i> Our Instagram </a>
  </li>
  <li><a href="#"><i class="fa fa-facebook"></i> We are on facebook </a>
  </li>
  <li><a href="#"><i class="fa fa-twitter"></i> Our twetter </a>
  </li>
  <li><a href="#"><i class="fa fa-google-plus"></i> We are on Google+ </a>
  </li>
</ul>

0

Иконки имеют разную ширину, поэтому и отступы "пляшут", для того, чтобы они не плясали, просто укажите им конкретную ширину (максимальную для самой широкой иконки)

0

Думаю, вы ожидаете именно этот результат:

@import "https://cdnjs.cloudflare.com/ajax/libs/godlike.css/3.3.7/godlike.min.css";
ul>li {
  position: relative;
  padding: 0 0 0 28px;
}
ul>li i {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  text-align: center;
}
ul>li i.fa-google-plus {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 14px;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<h3>Contact</h3>
<ul>
  <li><i class="fa fa-map-marker"></i> London, UK 441</li>
  <li><a href="tel:+75262685256"><i class="fa fa-phone"></i>Phone: +7 526 268 52 56</a></li>
  <li><a href="mailto:[email protected]"><i class="fa fa-envelope"></i>Email: [email protected]</a></li>
  <li><a href="#"><i class="fa fa-instagram"></i> Our Instagram </a>
  </li>
  <li><a href="#"><i class="fa fa-facebook"></i> We are on facebook </a>
  </li>
  <li><a href="#"><i class="fa fa-twitter"></i> Our twetter </a>
  </li>
  <li><a href="#"><i class="fa fa-google-plus"></i> We are on Google+ </a>
  </li>
</ul>

2
  • А чем ваш вариант отличается от моего?
    – soledar10
    20 янв 2017 в 14:23
  • @soledar10 Смотрите внимательней. 21 янв 2017 в 16:14

Ваш ответ

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

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