喜欢按钮对齐问题答案

【问题标题】：Like Button Alignment woes喜欢按钮对齐问题
【发布时间】：2012-01-04 14:17:38
【问题描述】：

我目前正在重新设计我的网站的布局，并试图将我的 Facebook 赞按钮放在我的页面底部，在我的“推文”按钮旁边......但是似乎有 5 个像素的差异在每个按钮的顶部和底部之间，使它们不对齐...我尝试将 div 的填充和边距设置为 0，但这也没有用...

该页面可以在这里看到：http://www.jameshenry.info/test/video.php?video=14

关于为什么每个按钮的顶部没有对齐的任何想法？

【问题讨论】：

标签 - 这应该是 php、HTML 吗？

标签： php html css button facebook-like

【解决方案1】：

试试下面的

<div class="bottombar">
  <div style="float:left">
    <iframe class="twitter-share-button ......
  </div>
  <div class="float:left">
    <fb:like ........
  </div>
  <div style="clear:both;"></div>
</div>

【讨论】：

这似乎有效 - 谢谢！有什么方法可以在页面的右侧对齐？我试过使用 float:right 但两个按钮之间有一个间隙！
保持浮动：对；（顺序颠倒）但在左侧的项目中添加一个margin-right：-5px（应该是fb：like的DIV）

【解决方案2】：

不幸的是，没有什么可以做的，尺寸似乎随着每个浏览器的填充和边距而变化。您可以将容器设置为特定大小并将溢出设置为隐藏，但随后它将在一个浏览器中切断部分按钮，但不会在另一个浏览器中切断。

我知道帮助不大，但我不会在这上面浪费太多时间。

我采用的一种方法是创建一个不错的共享按钮，并让它们都出现在悬停时的工具提示中。至少在需要之前隐藏丑陋！

希望有帮助:)

【讨论】：

【解决方案3】：

试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Azari & III - James Henry
</title>
<link href="scripts/page.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class = 'rightbar'>
<div class = 'videobox'>
<iframe src="http://player.vimeo.com/video/28767067?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp" width="640" height="360" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe><BR><div class='video-title'>Azari & III</div><div class='video-subtitle'>Manic (Directors Cut)</div><BR><div class='back'><a href="./">&laquo;back</a></div></div>
</div>
<div class ='bottombar'>
    <div style="margin: 3px 3px 0px 3px; position: relative; float: left;"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>
    <div style="margin: 3px 3px 0px 3px; position: relative; float: left;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like show_faces="false" layout="box_count" width="75" padding="0" margin="0" font="lucida grande" !important ></fb:like></div>
<div>
</body>
</html>

【讨论】：