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

当我将 padding-left 更改为 25 结果为:

我应该怎么做才能平衡图标之间的所有距离？

两次更新:这是 chrome 的另一次检查。

Answer 1

看起来你的 CSS 的第二部分使它不平衡:

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

这将应用于除最后一项之外的所有元素。

您可能将更大的 margin-left 应用于另一个(可能不那么具体，继承的选择器)中的所有元素，但此规则会覆盖它以使其更小，但不会用于最后一个元素。最后一项继承了较大的左边距。

如果此代码不会对您网站的其他部分产生负面影响，请尝试将其更改为应用于所有元素:

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

或者完全删除它，注意这段代码的其他应用和可能需要的地方。

使用 !important 在生产代码中不合适，最好只在调试时使用它。最好了解站点的结构并组织代码，使其尽可能简单，以最大限度地提高可维护性。

检查最后一项并找到从哪里继承边距。这可能会为您提供有关如何更好地构建解决方案的线索。