Lỗi nổi của Firefox? Làm thế nào để tôi có được nổi của tôi: ngay trên cùng một dòng?

Question

Tôi có fiddle sau:

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

Trong Chrome, nó ám chỉ tốt. Chữ V nằm ở bên phải.

Tuy nhiên, trong Firefox, nó sẽ giảm Chevron xuống 1 dòng.

Tôi đã tìm kiếm trên google và tìm thấy một số bài đăng về lỗi này, nhưng không có đề xuất nào đã giúp.

Bất kỳ chuyên gia CSS nào ở đó có thể cho tôi biết tôi đang làm gì sai?

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

Thay đổi thứ tự của các phao, đặt nó trước khi các văn bản như thế này:

<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

Dưới đây là thêm một giải pháp:

cho phong cách thẻ span của bạn như thế này.

Answer 3

Có vẻ như tài sản white-space là nguyên nhân của vấn đề. Với lớp btn khách sạn này:

white-space: nowrap

Nếu bạn thay đổi điều đó bất động sản hoạt động tốt:

.btn { 
    white-space:normal 
} 

Kiểm tra Demo Fiddle

Answer 4

Nếu bạn don Không muốn đảo ngược thứ tự các yếu tố của bạn, bạn có thể float: left; yếu tố đầu tiên.