web-dev-qa-db-fra.com

Bug flottant de Firefox? Comment obtenir mon flotteur: directement sur la même ligne?

J'ai le violon suivant:

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

Dans Chrome, le rendu est parfait. Le chevron est sur le côté droit.

Cependant, dans Firefox, il baisse le Chevron d'une ligne.

J'ai cherché sur Google et trouvé plusieurs messages sur ce bogue, mais aucune des suggestions n'a aidé.

Des experts CSS là-bas qui peuvent me dire ce que je fais mal?

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>
cssfirefoxcss-float
53
Scottie

Modifiez l'ordre du flotteur, placez-le avant le texte comme ceci:

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

101
scooterlord

Il semble que la propriété white-space est la cause du problème. Avec la classe btn cette propriété est:

espace blanc: nowrap

Si vous modifiez cette propriété fonctionne correctement:

.btn {
    white-space:normal
}

Vérifiez le Demo Fiddle

64
DaniP

Si vous ne souhaitez pas inverser l'ordre de vos éléments, vous pouvez float: left; le premier élément.

4
Michael Petito