Html 社交媒体按钮排列不正确

我已将我的社交媒体部门定位在我的评论部门的右侧：

问题：我的社交媒体div中的社交媒体按钮不会保持在一条直线上。他们一直低于我的复习课

---

有什么建议吗？

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

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

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

我添加了最后两行，现在似乎效果不错。
更好的解决方案是完全删除iFrame，并使用Facebook（或Twitter和G+）提供的API编写自己的按钮。这将允许您完全按照自己的意愿设置样式，并且可能会缩短页面加载时间。但也许这让事情变得有点过分了

更新的小提琴可以在这里找到：