我目前正在重新设计我的网站布局,并试图将我的类似Facebook的按钮放在页面底部的"Tweet"按钮旁边。。。然而,每个按钮的顶部和底部之间似乎有五个像素的差异,使它们无法对齐。。。我已经尝试过将div的填充和边距设置为0,但这也不起作用。。。
页面可在此处查看:http://www.jameshenry.info/test/video.php?video=14
关于为什么每个按钮的顶部没有对齐,有什么想法吗?
尝试以下
<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>
不幸的是,没有什么可以做的,大小似乎随着每个浏览器的填充和边距而变化。您可以将容器设置为特定的大小,并将溢出设置为隐藏,但随后它会在一个浏览器中切掉部分按钮,而不会在另一个浏览器中将其切掉。
我知道帮不了多少忙,但我不会在上面浪费太多时间
我采用的一种方法是创建一个漂亮的共享按钮,并在悬停时将它们都显示在工具提示中。至少在需要之前,丑陋会被隐藏起来!
希望能有所帮助:)
尝试这个
<!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&byline=0&portrait=0&color=ffffff&" 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="./">«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>