css - teclado - mozilla inspector

¿Error de flotación de Firefox? ¿Cómo consigo mi flotador: justo en la misma línea?

Question

Tengo el siguiente violín:

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

En Chrome, se muestra muy bien. El galón está en el lado derecho.

Sin embargo, en Firefox, baja el Chevron 1 línea.

Busqué en Google y encontré varias publicaciones sobre este error, pero ninguna de las sugerencias me ha ayudado.

¿Algún experto en CSS que pueda decirme qué estoy haciendo 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>

Answer 1

Aquí hay una solución más:

Dale estilo a tu etiqueta span de esta manera.

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

Answer 2

Cambie el orden del flotador, póngalo antes del texto así:

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

Parece que la propiedad white-space es la causa del problema. Con la clase btn esta propiedad es:

espacio en blanco: nowrap

Si cambia esa propiedad funciona bien:

.btn {
    white-space:normal
}

Compruebe el violín de demostración

Answer 4

Retire el flotador en el tramo, agregue position: absolute y colóquelo usando arriba / derecha / abajo / izquierda.
Nota: .btn-group ya tiene position: relative desde bootstrap.

HTML

<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"></span>
    Checked option
  </button>
</div>

CSS

div.btn-group span {
  position: absolute;
  top: 7px;
  right: 12px;
}

Aquí hay un fiddle funciona.

Answer 5

Si no desea invertir el orden de sus elementos, puede float: left; El primer elemento.