在使用浮点数时，div的右边框被切断:右边是字体超赞的图标

Question

篡改下面的代码

**更新:边框显示在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元素中添加边距-右和填充-右，但它似乎不起作用。

当div向右浮动时，如何使span显示边框？

Answer 1

我们开始:)

.right{
float:right;
width:200px;
text-align:right;}

Answer 2

类.fa集显示:内联块

重写浮动元素的.fa：

.right .fa{
    display: inline;
}

Answer 3

我只是用

.right {
  float: right;
  width: 30%;
  margin-right: 0px;
}

而且对我有好处！

见我的示例