Firefox float bug? Wie bekomme ich mein Float: direkt auf der gleichen Linie?

Question

Ich habe folgende Geige:

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

In Chrome, es macht einfach gut. Der Chevron ist auf der rechten Seite.

Allerdings, in Firefox, lässt es den Chevron 1 Zeile unten fallen.

Ich habe google gesucht und mehrere Posts über diesen Bug gefunden, aber keiner der Vorschläge hat geholfen.

Irgendwelche CSS-Experten da draußen, die mir sagen können, was ich falsch mache?

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

Ändern der Reihenfolge des Schwimmers, legte es vor dem Text wie folgt aus:

<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

Hier ist eine weitere Lösung:

Geben Sie Ihrem Span-Tag Stil wie folgt.

Answer 3

Es ist wie die Eigenschaft scheint white-space ist die Ursache des Problems. Mit der Klasse btn diese Eigenschaft:

white-space: nowrap

Wenn Sie diese Eigenschaft ändern funktioniert:

.btn { 
    white-space:normal 
} 

Überprüfen Sie die Demo Fiddle

Answer 4

Wenn Sie don Möchten Sie die Reihenfolge Ihrer Elemente nicht ändern, könnten Sie das erste Element float: left;.