html - ソーシャル メディア ボタンが正しく並んでいない

Question

ソーシャル メディア部門をレビュー部門の右側に配置しました: http://jsfiddle.net/eYQWE/

問題: My Social Media div 内のソーシャル メディア ボタンが一直線に並んでいません。それらは私の Review Div を下回り続けています。

助言がありますか？

Answer 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/

Answer 2

これは Facebook の iframe で、幅は 450px に設定されています。生成されたコードを変更できる場合はそこで修正できます。それ以外の場合は、css/js でリセットする必要があります。この場合、Firebug があなたの親友になります (まだいない場合)。