Facebook как кнопка в <ul>

Question

Кнопка Facebook сводит меня с ума.Я пытаюсь поместить все социальные кнопки в один ul с «display: inline;»на элементах li.Вот код:

        <ul id="social" class="grid_3 alpha">
            <li><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
            <li><div class="g-plusone" data-size="medium" data-count="false"></div></li>
            <li><iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></li>

        </ul>

Вот результаты: с Safari:

и с Firefox:

Теперь почему они не показываютна той же строчке в Safari?

Спасибо за любую помощь!

Answer 1

Установите ширину <ul> для размещения всех тегов 3 <li> и float:left тегов <li>.

Критическим моментом здесь является установка определенной ширины в <ul>

Answer 2

Попробуйте добавить float:left к li элементам.Кроме того, вы должны определить / сбросить margin и padding для вашего элемента ul, потому что именно это объясняет различия между браузерами.

Почему Firefox использует другие отступы, чемSafari, Chrome и IE8?