Menu
I have the following fiddle:
http://jsfiddle.net/q05n5v4c/2/
In Chrome, it renders just fine. The chevron is on the right side.
However, in Firefox, it drops the Chevron down 1 line.
I've searched google and found several posts about this bug, but none of the suggestions have helped.
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> 
357
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
There is no way to float center in CSS layout. So, we can center the elements by using position property. Example 1: This example set the position of elements exactly at the center of the screen.
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/
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
