UL li items won't float:right properly in safari, what gives?
I'm trying to make a UL that has 3 LI's. In chrome/IE/FF it works fine and looks like this:
but in safari the float:right on the LI's doesn't work right and it looks like this:
(styles are here)
#subnav_right{display:inline;list-style:none;}
#subnav_right li{float:right;}
<li styl开发者_JAVA技巧e="float:right;list-style:none;margin:0px 5px 0 0">
<g:plusone count="false" size="medium"></g:plusone>
</li>
<li style="float:right;list-style:none;margin:0px 5px 0 0;overflow:hidden;width:50px;">
<div id="fb-root"></div><fb:like href="LIKEBUTTONURL" send="true" layout="button_count" width="50" show_faces="false" send="false" font="arial"></fb:like>
</li>
<li style="float:right;list-style:none;margin:0px 0 0 0">
<form action="SEARCH BUTTON URL" id="cse-search-box">
<label for="q">
<input type="text" name="q" size="19" />
</form>
</li>
What's the story here? Why doesn't this work? What's Apple doing here?
I'm suprised this isn't happening if more of your browsers. If you look at your markup, the li's coming in this order 1) plusone 2) facebook 3) search. When you float right, the elements are floated right in that order so plusone is the first item to be floated right and they each stack up against each other in the flow. You would have to re-order them to get them to float right in the order you want :
<li style="float:right;list-style:none;margin:0px 0 0 0">
<form action="SEARCH BUTTON URL" id="cse-search-box">
<label for="q">
<input type="text" name="q" size="19" />
</form>
</li>
<li style="float:right;list-style:none;margin:0px 5px 0 0;overflow:hidden;width:50px;">
<div id="fb-root"></div><fb:like href="LIKEBUTTONURL" send="true" layout="button_count" width="50" show_faces="false" send="false" font="arial"></fb:like>
</li>
<li style="float:right;list-style:none;margin:0px 5px 0 0">
<g:plusone count="false" size="medium"></g:plusone>
</li>
精彩评论