SNSボタンをきれいに横並びに

HP上にSNSの各ボタンを並べるのを今更ながらやってみたら、余分なスペースがあったり、ガタガタになってしまったので、今後きれいに横並びできるようにするための覚え書きです。

今回は、Twitter、Google+、Facebookの3つです。

横に並べる html

デフォルトでは以下の様な状態です。

sns0

とりあえず、横並びにしてみる

すると、余白が・・・

sns1

Twitter は 124px、Google+は90pxぐらい自動的にwidth が指定されているようです。

なので以下のようにCSS修正

twitter とgoogle+はワイドを指定して、はみ出た部分はli にoverflow:hidden で対処しました。

Facebookで上部に余白ができるのは line-height:1 で余白を消すことができました。

sns2

 

こちらのサイト参考にさせていただきました:
TwitterやFacebookなどのソーシャルボタンを横に並べて設置する
http://s115.jp/wordpress/the-sort-method-next-to-the-social-buttons/

SNSでもご購読できます。