Как я могу совместить кнопки G + и Facebook как одну и ту же строку?

Question

Я довольно новичок в html и во всем этом джазе, так что я могу неправильно использовать определенный код.

Я хочу поместить кнопку G + 1 и кнопку Facebook как рядом друг с другом, а также по центру подизображение на моей главной странице.

Вот мой сайт www.entitee.org И соответствующий блок кода (надеюсь)

<div class="socialmedia">
<div style="float:left; padding-left:400px;">
<div id="gplus"></div><g:plusone count="false"></g:plusone>

<div style="width:47px;overflow:hidden;float:right;">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=137562953001123&amp;xfbml=1"></script>
<fb:like layout="button_count" href="http://www.facebook.com/pages/ENTiTEE/162658567144308" send="true" width="225" show_faces="false" action="like" font=""></fb:like>
</div>
</div>
</div>

Яне уверен, что я неправильно использую стиль div или элементы выравнивания div, но я не могу получить его с помощью padding или чего-либо еще.

Спасибо!

Answer 1

Я использую G + 1 среднего размера, и я добавил этот код в CSS. Он выравнивает Facebook, Twiter и Google +1 на одной строке.

#___plusone_0, #___plusone_0 iframe {
 display:inline !important;
 height:23px  !important;
}

Answer 2

попытайтесь изменить теги DIV на SPAN, и, вероятно, так будет, поскольку теги span могут быть встроенными

больше информации: https://developers.google.com/+/web/+1button/

Answer 3

div.social{ 
    width:147px;
    height:23px;
    float:right;
    vertical-align:top !important;
}

Answer 4

Используйте кнопку Google +1 среднего размера и добавьте ее к своему CSS:

div#___plusone_0 {
  vertical-align: bottom !important;
}

Answer 5

Я посмотрел код на вашем сайте, и вот несколько шагов, которые вы могли бы предпринять, и они помогут вам в правильном направлении:

1. удалить поплавок: слева от атрибута стиля для кнопки Google Plus
2. добавьте это в ОБА на странице отображения тега стиля в Facebook и Google Plus: inline-block;
3. ваш div с классом, установленным в class = "socialmedia" имеет внутренний div с шириной, равной 60 px, чтобы увеличить его, возможно, на 100 px

Эти шаги должны объединить их в одной строке. Как всегда, тестируйте свой сайт в более чем одном браузере. Удачи!

Answer 6

css:

.social
{
    display:inline-block;
    font-size: 1px; /*very important for G+ button*/
    /*vertical-align:middle*/
}

Answer 7

Ваша ссылка и опубликованный код не совпадают, поэтому я перехожу по указанной ссылке.

Ваша кнопка +1 и кнопка facebook застряли в div размером 60px. Вам нужна ширина не менее 38p + 47px = 85px, чтобы соответствовать обоим. Так как места для плавающего раздела Facebook недостаточно, он падает под ним.

В заключение увеличьте ширину содержащихся элементов. Какой будет этот div ниже:

<div style="float:left; width:60px; float:left; padding-left:400px;">

PS: привет р / деревья