使用 float:right 和字体真棒图标时，div 的右边框被切断答案

【问题标题】：Right border of div being cut off when using float:right with font awesome icon使用 float:right 和字体真棒图标时，div 的右边框被切断
【发布时间】：2015-06-22 08:22:51
【问题描述】：

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显示边框？

【问题讨论】：

这很奇怪，但我确实看到了右边的边框：tinypic.com/r/dfd01y/8
@Medda86 - margin-right: 1px 到什么元素？
@dgp - 看起来它在 FireFox 中有效，但在 Chrome 中无效
我看到你在 .right 元素上需要宽度...你必须把 .right{width:200px;文本对齐：右；}
@Medda86 - 有效。如果你把它放在答案中，我会把它标记为正确的。

标签： html css

【解决方案1】：

class .fa 设置 display:inline-block

为浮动元素覆盖 .fa：

.right .fa{
    display: inline;
}

【讨论】：

【解决方案2】：

我们开始吧:)

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

【讨论】：

【解决方案3】：

我只是用

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

对我有好处！

见我的example

【讨论】：

这也有效，但它导致 div 元素变宽并且不再正确对齐。