Firefox的浮动错误？ 我如何得到我的浮动：在同一行吗？

我有以下小提琴：

http://jsfiddle.net/q05n5v4c/2/

在Chrome中，它呈现得很好。 雪佛龙在右侧。

但是，在Firefox中，它会降低Chevron的1行。

我search谷歌，发现有关这个错误的几个职位，但没有任何build议帮助。

那里的任何CSS专家可以告诉我我做错了什么？

HTML：

<div class="btn-group"> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" style="width: 400px;text-align: left;"> Checked option <span class="glyphicon glyphicon-chevron-down" style='float: right;'></span> </button> </div> 

Answer 1

改变浮点的顺序，把它放在这样的文本之前：

 <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"style="width: 400px;text-align: left;"> <span class="glyphicon glyphicon-chevron-down" style='float: right;'></span> Checked option </button> </div> 

http://jsfiddle.net/q05n5v4c/3/

Answer 2

这看起来像财产white-space是问题的原因。 与类btn这个属性是：

空格：NOWRAP

如果你改变该属性工作正常：

 .btn { white-space:normal } 

检查演示小提琴

Answer 3

如果你不想扭转你的元素的顺序，你可以float: left; 第一个元素。

Answer 4

这里是另一个解决scheme：

给这种风格你的span标签。

 position:absolute; right: 5px; top : 9px