Html &引用；对",；从不更改垂直对齐？

我试图在另一个字体真棒图标的右下角放置一个字体真棒。 我得出以下结论：

 <span class="fa-stack">
    <i class="fa fa-shopping-cart fa-stack-2x"></i>
    <i style="color:red;" class="fa fa-ban fa-stack-1x text-danger overlay-lower-right"></i>
</span>

.overlay-lower-right {
    position: absolute;
    bottom: -10px;
    right: -20px;
}

.右下角覆盖{
位置：绝对位置；
底部：-10px；
右：-20px；
}

然而，显然，无论我将什么设置为右值，图标始终保持水平居中。 只有当我输入左时，它才会改变

这里有什么问题？我要做的就是把图标一直放在右边

下面是一个包含代码的JSFIDLE：

---

在

font-awesome.css

中，您为

.fa-stack-1x

设置了

左：0

要解决这个问题，您必须使用

left:auto重置
left
然后设置
右侧
位置

.overlay-lower-right {
    position: absolute;
    bottom: -10px;
    right: -20px;
    left: auto; /* this line reset left: 0; */
}

什么是
fa堆栈的css
？如果你的跨度没有宽度，那么它可能只和你正在使用的图标一样大。e、 g.如果你给
fa stack
一个600px的宽度，那么上面的css会移动图标。我不知道问题出在哪里，但是如果你只是想将图标定位到右边，为什么不直接使用
text align:right？@haxtbh我尝试将跨度宽度设置为600-它没有按预期将图标向右移动。@LéoLam效果很好，谢谢。但是，我想知道为什么“right”属性在这个示例中不起作用（出于学习目的）。我明白了！如果你得到了答案，不要忘记接受答案（2天内）。啊，我明白了。我不知道！非常感谢-现在一切都有意义了！