html - 外部(facebook like 和 google plusone)按钮的棘手 CSS 布局

Question

放置/布局 google+1 和 facebook Like 按钮以使它们整齐对齐的最佳方式是什么？

目前，我体内的第一个“东西”是这个标题，它出现在所有页面的顶部(登录后略有修改):(为便于阅读而添加的换行符):

<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left">
      &nbsp;
      <g:plusone size="small" href="https://www.apebroker.com/">
      </g:plusone>
      <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.apebroker.com%2Findex.php&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
      &nbsp;
    </td>
    <td align="left"></td><td align="right">It's more fun after you
      <a href="https://www.apebroker.com/loginform.php">login</a>&nbsp;
    </td>
  </tr>
</table>

我的问题是这看起来像废话。我知道页面不需要在每个浏览器中看起来都完全一样，但可接受的丑陋是有限制的。google 按钮很好地“垂直居中”，而 facebook 的东西有点粘在页面顶部，向下 0px。请参阅此示例:

我尝试添加 padding:2px;到 facebook iframe 中的样式，当然，它下降了一点，但 google 按钮也是如此，整个标题都变大了，将 <hr> 向下推。下面。

我显然对 iframe 了解不多，但到目前为止我自己管理得很好。

在我的全局样式表中，我有(除其他外)这个:

body {
 margin:0px;
 padding:0px; 
 background-color:#e0e0b0; 
 color:#302010;
 font-family:"Trebuchet MS",Helvetica,Sans-serif; 
 font-size:100%;
}

而且我不想改变它，因为它会叠加到我不愿打破的各种事情上。如果您想查看完整的样式表和 HTML 源代码，可以找到示例页面 here .

提前感谢您的任何提示/建议!

Answer 1

加一个按钮，它的宽度如何？

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ru'}
</script>