Баланс пространства для социальных сетей Иконки в HTML CSS?

Question

У меня есть социальная линия в заголовке моего сайта.но пространство между значком не установлено.

это то же самое для моих трех значков:

.top-bar .bar-right ul.bar-social li a i {
    font-size: 13px;
    color: #969696;
    padding-left: 2px;
}

.list-inline-item:not(:last-child) {
    margin-left: .5rem !important;
}

<li class="list-inline-item">
  <a href="https://www.linkedin.com/in/mmaaaaaaaaaaa/">
    <i class="fa fa-linkedin"></i>
  </a>
</li>

Когда я изменяю отступ влево на 25 , результат выглядит так:

Что я должен сделать, чтобы сбалансировать все расстояние между иконками?

два обновления: это еще одна проверка из Chrome.

Answer 1

Похоже, что вторая часть вашего CSS делает его не сбалансированным:

.list-inline-item:not(:last-child) {
    margin-left: .5rem !important;
}

Это применяется ко всем элементам, кроме последнего.

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

Попробуйте изменить это, чтобы применить его ко всем элементам, если этот код не оказывает негативного влияния на другие разделы вашего сайта:

.list-inline-item {
    margin-left: .5rem !important;
}

Или вообще удалите его, будьте осторожны, где это ещекод применяется и, возможно, необходимо.

Использование !important не подходит для производственного кода, лучше использовать его только при отладке.Лучше понять структуру вашего сайта и упорядочить код так, чтобы он был максимально простым, чтобы максимизировать удобство сопровождения.

Проверьте последний элемент и выясните, откуда наследуется поле.Это может дать вам представление о том, как лучше структурировать решение.

Answer 2

Лучший способ - использовать упаковщик на основе flex:

.top-bar .bar-right ul.bar-social { display:flex; justify-content:center; }
.top-bar .bar-right ul.bar-social > li { flex:1; }

ОБНОВЛЕНИЕ: Я изменил CSS-селектор, чтобы он соответствовал вашим именам классов

Answer 3

Попробуйте использовать margin-right вместо padding-left

.top-bar .bar-right ul.bar-social li a i {
  font-size: 13px;
  color: #969696;
  margin-right: 2px;
}