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 のボタンはページの上部 (0 ピクセル下) にくっついています。次の例を参照してください。Facebook iframe へのオフセットなし

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 ソースを確認したい場合は、ここにサンプル ページがあります。

ヒント/提案をよろしくお願いします！

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">

そうすれば、各セルの高さを明示的に制御したり、物を配置したりできるようになるため、生活が少し良くなります。現時点では、21ピクセルの高さを「要求」しているにもかかわらず、26ピクセルになっています。

その後、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 に答える