使用float时，div的右边界被切断：right with font真棒图标
下面的代码的小提琴
**更新：边框显示在Firefox中，但不是Chrome。 **
CSS：
.right{
float:right;
}
.buttonBorder{
border: 1px solid black;
padding:0px 10px 0px 10px;
}
HTML：
<div>
<span>11 in stock!</span>
<span class="buttonBorder">Add to <i class="fa fa-shopping-cart"></i></span>
</div>
<div class="right">
<span>11 in stock!</span>
<span class="buttonBorder">Add to <i class="fa fa-shopping-cart"></i></span>
</div>
结果：
第一个div没有漂浮在右边。 当我将div浮动到右侧时，它会切断边框。 我试着为div，span和i元素添加margin-right和padding-right，并且它看起来不起作用。
当div浮动到右侧时，如何让跨度显示边框？
开始了 ：）
.right{
float:right;
width:200px;
text-align:right;}
class .fa设置display：inline-block
覆盖.fa为浮动元素：
.right .fa{
display: inline;
}
我只是用
.right {
float: right;
width: 30%;
margin-right: 0px;
}
对我有好处！
看我的例子
链接地址: http://www.djcxy.com/p/21985.html上一篇: Right border of div being cut off when using float:right with font awesome icon