html - 社交媒体按钮未正确排列

标签 html css facebook-social-plugins

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

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

有什么建议吗?

最佳答案

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

#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 编写您自己的按钮。这将允许您完全按照您的意愿设计它们的样式,并且可能会改善您的页面加载时间。但也许这让事情有点过头了......

可以在这里找到更新的 fiddle :http://jsfiddle.net/eYQWE/2/

关于html - 社交媒体按钮未正确排列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12166442/

相关文章:

html - 跨单元格组在 HTML 表格中居中文本

javascript - Angular 中断了 jQuery 幻灯片放映

javascript - 将整个表格行变成链接的最标准和兼容的方法是什么?

javascript - 如果另一个元素不存在或不可见,如何隐藏一个元素?

html - XFBML 是否被弃用?

php - 无法显示/计算一组文本字段的总值 - angular js html php

javascript - Coffeescript HTML5 音频暂停所有其他音频元素

css - 如何使用媒体查询覆盖 polymer 中定义的属性

css - 填满圆形进度条

jquery - Bootstrap 模式中的 Facebook 评论插件