外部（facebook like 和 google plusone）按钮的复杂 CSS 布局答案

【问题标题】：Tricky CSS layout of external (facebook like and google plusone) buttons外部（facebook like 和 google plusone）按钮的复杂 CSS 布局
【发布时间】：2011-07-05 08:12:34
【问题描述】：

放置/布局 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。看这个例子：

我尝试在 facebook iframe 的样式中添加 padding:2px;，当然，它下降了一点，但 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 找到示例页面。

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

【问题讨论】：

标签： html css layout facebook-like google-plus-one

【解决方案1】：

加一个按钮怎么样，宽度呢？

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

【讨论】：

【解决方案2】：

一个问题是表格单元格会根据字体大小自行调整大小，即使表格中没有任何文本。

“正确”的答案是不要使用表格进行布局。

但是，如果您明确设置：

 <td align="left" style="font-size: 1px">

然后你的生活会稍微好一些，因为你将能够明确地控制每个单元格的高度和位置。目前，尽管您“要求”高度为 21 像素，但您得到的是 26 像素。

之后，FB 按钮看起来不错，您需要移动 +1 按钮。

但是，真正的答案是不要使用表格：

http://www.w3.org/2002/03/csslayout-howto

http://www.hotdesign.com/seybold/

还有其他各种...

【讨论】：

所以，我认为您的意思是我应该为 google 按钮设置一个 <div>，为 FB 按钮设置另一个 <div>？那仍然没有告诉我如何让它们在高度上对齐。我现在已经删除了上面的表格，用三个 div 替换它，一个包含 &nbsp;（中间的一个，使页面的其余部分出现在正确的位置），一个带有左侧的两个按钮，一个与右边的文字。看起来仍然很糟糕，但现在 FB Like 按钮高度居中，Google+1 现在位于“底部”。

【解决方案3】：

我找到了解决这个问题的方法，分别封装 fb:like 和 g:plus，然后将两者的样式设置为 style="vertical-align: top;"。参见http://www.clonearmycustoms.com/的示例

【讨论】：

破例。你能详细说明一下吗？