无法让社交媒体共享按钮在内联列表中排队
Posted
技术标签:
【中文标题】无法让社交媒体共享按钮在内联列表中排队【英文标题】：Cannot get Social Media Share Buttons to Line Up in inline list 【发布时间】：2011-04-05 01:35:29 【问题描述】：在我的一生中，我无法让这些社交媒体分享按钮与我的内联列表对齐。我几乎在<li> 上使用了vertical-align: top;，但Chrome 不喜欢这样。
可以在这里看到页面：http://206.72.114.49/sharelinkstest.htm
完整的 html/CSS 如下：
<!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>
<title></title>
<style type="text/css">
.share-links
margin: 8px 0 0 0;
padding-left: 0;
display: inline;
.share-links li
margin-left: 0;
padding-right: 15px;
list-style: none;
display: inline;
</style>
</head>
<body>
<ul class="share-links">
<li><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-url="$fqUrl$post.Url"#if ($macros.IsNotNull($post.ResolvedImageUrl)) data-imageurl="$fqUrl$post.ResolvedImageUrl"#end></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></li>
<li><a href="http://twitter.com/share" class="twitter-share-button" data-url="$fqUrl$post.Url" data-text="$post.Title by $post.User.ProperName" data-count="horizontal" data-via="lifeorganically">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
<li><iframe src="http://www.facebook.com/plugins/like.php?href=$fqUrl$post.Url&layout=button_count&show_faces=false&width=80;&action=like&font&colorscheme=light&height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:25px;" allowTransparency="true"></iframe></li>
</ul>
</body>
</html>
【问题讨论】：
我也是使用内联列表的时间最长的社交分享按钮，但我发现切换到 div 效果更好，即使那样我也无法在所有浏览器上完美，但最后我没有不要在我的个人主页上给出...。 【参考方案1】：将 Facebook iframe 的高度设置为 20px 似乎可以解决问题。
【讨论】：
以上是关于无法让社交媒体共享按钮在内联列表中排队的主要内容，如果未能解决你的问题，请参考以下文章