社交媒体按钮未正确排列

Question

我已将我的社交媒体部分放在我的评论部分右侧：http://jsfiddle.net/eYQWE/

问题：我的社交媒体div中的社交媒体按钮不会保持一条直线。他们继续低于我的评论部分。

有什么建议吗？

Answer 1

问题在于iframe frome facebook的宽度为450px，它会拉伸其父级并使按钮显示在文本下方。尝试为包装器设置固定宽度，如下所示：

#social li {
display: inline-block;
text-decoration: none;
padding: 0 0 0 33px;
float: left;
max-width: 80px;
overflow: hidden;
}​

我添加了最后两行，现在似乎工作得很好。
更好的解决方案是使用Facebook（或Twitter和G +）提供的API，逐步删除iframe并编写自己的按钮。这样您就可以根据自己的意愿对其进行样式设置，并可能会缩短页面加载时间。但也许这对事情有点远......

可以在此处找到更新的小提琴：http://jsfiddle.net/eYQWE/2/

Answer 2

这是facebook iframe，宽度设置为450px，如果你可以更改生成的代码，你可以在那里修复它，否则你必须用css / js重置。在这种情况下，Firebug将是你最好的朋友（如果还没有）。