外部（facebook like 和 google plusone）按钮的棘手 CSS 布局

发布于 2024-11-18 14:53:51 字数 1827 浏览 5 评论 0原文

放置/布局 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。请参阅此示例： no offset to facebook iframe

我尝试将 padding:2px; 添加到样式中在 facebook iframe 中，当然，它下降了一点，但是 google 按钮也下降了一点，并且整个标题变大，压低了下面的

。

显然我对 iframe 不太了解，但到目前为止我自己已经做得很好了。

在我的全局样式表中，我有（除其他外）：

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

我不想改变它，因为它会级联到我不愿意破坏的各种事情。如果您想查看完整的样式表和 HTML 源代码，可以找到示例页面此处。

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

原文

What is the best way to place/layout the google+1 and facebook Like buttons so they align neatly?

Currently, the first "thing" in my body is this heading, appearing on top of all pages (slightly modified after logging in): (linebreaks added for readability) :

<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left">
       
      <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&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
       
    </td>
    <td align="left"></td><td align="right">It's more fun after you
      <a href="https://www.apebroker.com/loginform.php">login</a> 
    </td>
  </tr>
</table>

My problem is that this looks like crap. I know that pages don't need to look exactly the same in every browser, but acceptable ugliness has its limits.
The google button is nicely "vertically centered", while the facebook stuff kind of sticks to the top of the page, 0px down.
See this example: no offset to facebook iframe

I tried adding padding:2px; to the style in the facebook iframe, and sure, it came down a bit, but so did the google button too, and the entire heading grew, pushing down the <hr> below.

I obviously don't know much about iframes, but I've managed fine on my own until now.

In my global style sheet I have (amongst other things) this:

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

And I don't want to change that, as it cascades to all sorts of things that I'm reluctant to break. If you want to check out the complete style sheet and HTML source, an example page can be found here.

Thank you in advance for any hints/suggestions!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赏烟花じ飞满天 2024-11-25 14:53:51

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

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

How about plus one button, and it's width?

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

回复收藏 0 原文

纵山崖 2024-11-25 14:53:51

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

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

但是，如果您明确设置：

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

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

之后 FB 按钮看起来会很漂亮，您需要移动 +1 按钮。

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

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

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

以及各种其他的...

A problem is that the table cells are sizing themself based on the font size even though there isn't any text in the table.

The "correct" answer is not to use tables for layout.

However, if you explicitly set:

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

then your life will get slightly better as you'll be able to explicitly control the height of each of the cells and position things. At the moment despite you "asking" for a height of 21px, you're getting 26px.

After that the FB button will look nice and you'll need to move the +1 button around.

But, the real answer is not to use tables:

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

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

and various others...

回复收藏 0 原文