Question

我的网站标题中有一个社交专栏。但未设置图标之间的间隔。

这与我的三个图标相同：

UI

ui.access()

当我将padding-left更改为 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

尝试使用右上边距而不是左上边距

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