Firefox float bug？如何获得我的浮动：在同一行？ [英] Firefox float bug? How do I get my float:right on the same line?

问题描述

我有以下小提琴：

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

在Chrome中，它渲染得很好。

In Chrome, it renders just fine. The chevron is on the right side.

然而，在Firefox中，它会将Chevron下降1行。

However, in Firefox, it drops the Chevron down 1 line.

我搜索过google，发现了几个关于这个bug的帖子，但没有一个建议有帮助。

I've searched google and found several posts about this bug, but none of the suggestions have helped.

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

Any CSS experts out there that can tell me what I'm doing wrong?

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>

推荐答案

更改浮点的顺序，文本如下：

Change the order of the float, put it before the text like this:

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

这篇关于Firefox float bug？如何获得我的浮动：在同一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！