社交媒体按钮未正确排列答案

【问题标题】：Social media buttons not lining up correctly社交媒体按钮未正确排列
【发布时间】：2012-08-29 03:58:41
【问题描述】：

我已将我的社交媒体 Div 放置在 Review Div 的右侧：http://jsfiddle.net/eYQWE/

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

有什么建议吗？

【问题讨论】：

【解决方案1】：

问题是来自 facebook 的 iframe 的宽度为 450 像素，这会拉伸其父级并使按钮出现在文本下方。尝试为包装器设置固定宽度，如下所示：

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

我添加了最后 2 行，现在它似乎工作得很好。
更好的解决方案是完全删除 iframe，并使用 Facebook（或 Twitter 和 G+）提供的 API 编写自己的按钮。这将允许您完全按照自己的意愿设置它们的样式，并且可能会改善您的页面加载时间。但也许这有点牵强了......

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

【讨论】：

【解决方案2】：

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

【讨论】：