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> 

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

 <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/

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

空格:NOWRAP

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

 .btn { white-space:normal } 

检查演示小提琴

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

这里是另一个解决scheme:

给这种风格你的span标签。

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