html - 带有超赞字体图标的意外边距

Question

我有一个带有 list-style-type:none; 的

。我想显示一个自定义图标，而不是列表图标，它应该是可变的 和可点击的。为确保自定义图标显示在文本左边距的左侧，我添加了 text-indent:-17px; 并且这按预期工作。

但是，当我的文本中有 Font Awesome 图标时，它们的左边距(或者更像是它们的 text-indent)似乎设置为包含

的缩进.在下面的快照中，第一个

有一个 text-indent:-17px，第二个 0px，第三个 +20px。



第一个清楚地显示图标的负 margin-left/text-indent，而最后一个具有正 margin-left。

我该如何解决这个问题，以便我可以使用负缩进？




问题出现在 FireFox v29、IE v11 和 Chrome v35 中。
Font-Awesome 是 v4.1.0

---

我的代码:

<ul style="list-style-type:none;">
    <li>
      <div style="text-indent:-17px; margin-bottom:20px;">
        <img src="http://i.stevenvh.net/tam_none.png" alt="" /> 
        Lorem <a href="#">ipsum  <i class="fa fa-external-link"></i></a> dolor sit amet, consectetur adipiscing elit. 
      </div>
    </li>
    <li>
      <div style="text-indent:0px; margin-bottom:20px;">
        <img src="http://i.stevenvh.net/tam_none.png" alt="" /> 
        Lorem <a href="#">ipsum  <i class="fa fa-external-link"></i></a> dolor sit amet, consectetur adipiscing elit. 
      </div>
    </li>
    <li>
      <div style="text-indent:20px; margin-bottom:20px;">
        <img src="http://i.stevenvh.net/tam_none.png" alt="" /> 
        Lorem <a href="#">ipsum  <i class="fa fa-external-link"></i></a> dolor sit amet, consectetur adipiscing elit.
      </div>
    </li>
</ul>

最佳答案

问题是 text-indent 是继承的。将第三项设置为 20px 是将其添加到内部 i

这样做会重置文本缩进。注意 i

上添加的样式

http://jsfiddle.net/dJqUh/2/

<li>
  <div style="text-indent:20px; margin-bottom:20px;">
    <img src="http://i.stevenvh.net/tam_none.png" alt="" /> 
    Lorem <a href="#">ipsum  <i class="fa fa-external-link" style="text-indent:0px;"></i></a> dolor sit amet, consectetur adipiscing elit.
  </div>
</li>

第二个元素没有做任何错误，因为您将缩进设置为 0。它与第一个元素中的文本重叠，因为您有一个负缩进。

关于html - 带有超赞字体图标的意外边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24231527/

Answer 1

问题是 text-indent 是继承的。将第三项设置为 20px 是将其添加到内部 i

这样做会重置文本缩进。注意 i

上添加的样式

http://jsfiddle.net/dJqUh/2/

<li>
  <div style="text-indent:20px; margin-bottom:20px;">
    <img src="http://i.stevenvh.net/tam_none.png" alt="" /> 
    Lorem <a href="#">ipsum  <i class="fa fa-external-link" style="text-indent:0px;"></i></a> dolor sit amet, consectetur adipiscing elit.
  </div>
</li>

第二个元素没有做任何错误，因为您将缩进设置为 0。它与第一个元素中的文本重叠，因为您有一个负缩进。