UL li物品不会漂浮：在野生动物园中正确使用，是什么给出的？

Question

我正在尝试制作一个有3个LI的UL。在chrome / IE / FF中，它工作正常，看起来像这样：

但是在safari中，浮动：在LI的右侧不能正常工作，它看起来像这样：

(styles are here)
#subnav_right{display:inline;list-style:none;}
#subnav_right li{float:right;}

<li style="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>

这里的故事是什么？为什么这不起作用？ Apple在这做什么？

Answer 1

我很惊讶如果您的浏览器更多，这种情况就不会发生。如果你看看你的标记，li将按此顺序进行1）plusone 2）facebook 3）搜索。当你向右浮动时，元素按顺序浮动，因此plusone是第一个要向右浮动的项目，它们每个都在流程中相互叠加。您必须重新排序它们才能按照您想要的顺序浮动它们：

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