当使用float时，div的右边界被切断：右边有字体真棒图标

Question

Fiddle of the below code

**更新：边框显示在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向右浮动时，如何让span显示边框？

Answer 1

类.fa设置display：inline-block

覆盖浮动元素的.fa：

.right .fa{
    display: inline;
}

Answer 2

我只是用

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

对我有用！

查看我的example

Answer 3

我们走了:)）

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