Question

我有两个徽标，请参见下图，这些徽标不会出现在同一列中。 twitter图标在右侧显示一些像素。

enter image description here

代码如下所示，插入图标：

<ul class="social">
        <li>
            <a title="" data-placement="top" data-toggle="tooltip"
               class="facebook" 
                href="https://www.facebook.com/">
                <i class="fa fa-facebook"></i>
                <span>&nbsp;&nbsp;&nbsp;Facebook</span>
            </a>
        </li>
    </ul>


<ul class="social">
        <li>
            <a title="" data-placement="top" data-toggle="tooltip"
               class="twitter" href="https://twitter.com/">
                <i class="fa fa-twitter"></i>
                <span>&nbsp;&nbsp;&nbsp;Twitter</span>
            </a>
        </li>
    </ul>

CSS：

.bloggfb{
  width:100%;
  text-align:center;
 }

如何摆脱推特图标前面的空间？

Answer 1

我正在看你的网站。将此添加到您的CSS中，它至少在Chrome中运行良好：

 .social li a {
display: table;
margin-left: 50px;
margin-top: 10px;
}

After adding the abve CSS in inspector in my browser

Answer 2

这是因为图像＆amp;文本居中（光学错觉）。

当您将text-align: center更改为text-align: left时，一切都应该没问题

.bloggfb{
  width: 100%;
  text-align: left;
}

enter image description here

如果您仍然认为它并不完美您可以随时使用position: relative & absolute组合：

 .bloggfb li{
     position: relative;
  }

.bloggfb i{
     position: absolute;
     left: 0;
     top: 0;
}

每个<i>元素将根据<li>元素绝对定位，精度为1px

Answer 3

这就是原因：

.bloggfb {
  width: 100%;
  text-align: center;
}

如果将其更改为text-align: left;，则两个图标都会正常显示。

Answer 4

如果在左对齐后感觉该项目在左侧，您也可以尝试为该元素提供公共宽度。

尝试单独更改以下css以使其对齐，并同时将项目保持在中心位置：

.social {
display: inline-block;
list-style: none;
vertical-align: middle;
width: 118px;
text-align: left;
}

希望这就是你想要的样子：

enter image description here

徽标不会出现在同一位置

4 个答案: