Элементы UL li не будут плавать: правильно в сафари, что дает? - PullRequest
Новая
       17

Элементы UL li не будут плавать: правильно в сафари, что дает?

0 голосов
/ 11 июля 2011

Я пытаюсь сделать UL с 3 LI.В chrome / IE / FF он работает нормально и выглядит так:

enter image description here

, но в сафари float: прямо на LI не работает правильно и выглядит так:

enter image description here

(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 делает здесь?

1 Ответ

0 голосов
/ 11 июля 2011

Я удивлен, что этого не произойдет, если больше ваших браузеров. Если вы посмотрите на вашу разметку, то ли идет в следующем порядке: 1) плюс один 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>
...