如何将 G+ 按钮和 facebook like 按钮对齐在同一行？

Posted 2023-02-25

【中文标题】如何将 G+ 按钮和 facebook like 按钮对齐在同一行？

【英文标题】：How can I align the G+ button and facebook like button the same row?

【发布时间】：2011-08-18 20:09:26

【问题描述】：

我对 html 和所有的爵士乐相当陌生，所以我可能会滥用某些代码。

我想将 G+1 按钮和 facebook like 按钮并排放置，并在我的主页上的图片下方居中。

这是我的网站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"  show_faces="false" action="like" font=""></fb:like>
</div>
</div>
</div>

我不确定我是否误用了 div 样式或 div 对齐项，但我似乎无法使用填充或其他任何东西来获得它。

谢谢！

【参考方案1】：

我使用 G+1 中号，我在 css 中添加了这段代码。 它将 facebook、twiter 和 google +1 对齐在同一行。

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

【参考方案2】：

我查看了您网站上的代码，以下是您可以采取的一些步骤，可以让您朝着正确的方向前进：

从 google plus 按钮的样式属性中移除 float:left 将此添加到 facebook 和 google plus div 的样式标签 display:inline-block; 类设置为 class="socialmedia" 的 div 有一个宽度设置为 60 px 的内部 div，使其更大可能 100 px

这些步骤应该将它们放在同一行。一如既往地在一个以上的浏览器中测试您的网站。祝你好运！

【讨论】：

嘿，成功了！非常感谢！那显示：inline-block 有什么作用？

一个 div 通常是块级元素，通常这意味着如果另一个 div 紧随其后添加，它将直接位于它的下方。内联块基本上让 div 保持其一致的外观，但允许将其放置在其他元素旁边。 quirksmode.org/css/display.html#inlineblock

哦，内容丰富！这里有没有支持的选项......我想我需要更多的代表来做到这一点。

【参考方案3】：

使用“中等”大小的 Google +1 按钮，并将其添加到您的 CSS：

div#___plusone_0 
  vertical-align: bottom !important;

【参考方案4】：

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

【参考方案5】：

尝试将 DIV 标签更改为 SPAN，并且可能会因为 span 标签可以内联

更多信息：https://developers.google.com/+/web/+1button/

【参考方案6】：

您的链接和发布的代码不匹配，所以我将关闭提供的链接。

您的 +1 按钮和 facebook 按钮都被塞进了 60 像素的 div 中。您需要至少 38p + 47px = 85px 的宽度来适应两者。由于浮动的 facebook div 没有足够的空间，因此它位于下方。

总之增加包含 div 的宽度。下面是这个 div：

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

PS: Hi r/trees

【讨论】：

感谢您的回复！我尝试了您的答案，结果它们看起来都适合，但 gplus div 仍然位于 facebook div 之上。不确定我是否做错了，但这就是我用 替换该行的原因，我将尝试其他答案，看看是否有帮助。谢谢。 PS：D

【参考方案7】：

css:

.social

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