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 回答