размещение лайков типа фейсбук и кнопок Google + в строке? - PullRequest
Новая
       23

размещение лайков типа фейсбук и кнопок Google + в строке?

9 голосов
/ 28 сентября 2011

У кого-нибудь есть хитрости по выравниванию этих двух кнопок на странице? По умолчанию iframe-версия кнопки «Нравится» на Facebook отображается под кнопкой «Google Plus» или наоборот. Есть ли какие-нибудь трюки css, чтобы держать их в строке?

Это моя текущая попытка 

<div style="float:left;width:100px;">
    <!-- Place this tag where you want the +1 button to render -->
    <g:plusone></g:plusone>

    <!--  Place this tag after the last plusone tag -->
    <script type="text/javascript">
        (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
    </script>
</div>
<div style="float:left;width:auto;">
    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmy_site&amp;layout=button_count&amp;show_faces=false&amp;width=350&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light&amp;height=40" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:30px;" allowTransparency="true"></iframe>
</div>

Ответы [ 4 ]

19 голосов
/ 28 сентября 2011

Поместите их в список - вот что я сделал (извините за JSP) 

<ul class="like-buttons">
<li class="g-plus-one">
    <g:plusone count="false"></g:plusone>
</li>
<li class="twitter-like">
    <a href="http://twitter.com/share" class="twitter-share-button" data-url="<%= url %>" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</li>   

<li class="fb-like">
    <iframe src="http://www.facebook.com/plugins/like.php?href=<%= facebookUrl %>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=dark&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:30px; color:#fff!important;" allowTransparency="true"></iframe>
</li>

и css: 

ul.like-buttons{
float: left;
list-style: none;
margin: 5px 0 20px 0;
padding: 0;
width: 100%;
}

ul.like-buttons li{
    display: block;
    float: left;
    margin-right: 10px;
}
li.twitter-like{
    margin-top: 2px;
}
0 голосов
/ 27 апреля 2015

Используйте следующий источник визуализации Google Plus: 

<div style="margin-top: 11px;"><li class='g-plusone' data-size='tall'/></div></div>

Вы можете настроить маржу по вашему требованию Это было мое требование. Kuwar Dheeraj Шривастава at One Click Lyrics India

0 голосов
/ 28 сентября 2011

Вы должны включить их в оболочку div.Тем не менее, ваш фактический отображается в той же строке для меня

ваш код: http://jsfiddle.net/HbYn3/

0 голосов
/ 28 сентября 2011

Возможно, ширина родительского div меньше, чем сумма ширины этих двух фреймов.

Ваш фрейм FB имеет ширину 350 пикселей. Но кнопка «Мне нравится» меньше.

...