1

放置/布局 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;在 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 源代码，可以在此处找到示例页面。

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

4

3 回答 3

1

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

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ru'}
</script>
于 2011-09-25T09:55:27.000 回答
0

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

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

但是，如果您明确设置：

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

那么你的生活会稍微好一些，因为你将能够明确控制每个单元格的高度并定位事物。目前，尽管您“要求”高度为 21px，但您得到的是 26px。

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

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

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

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

和其他各种...

于 2011-07-05T08:38:48.000 回答
0

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

于 2011-07-12T05:44:09.750 回答