A Little Each Day

note to self

SNSシェアボタンをキレイに横並びにする

こんにちは。本日はSNSボタンを横並びにする方法です。

SNSボタンを横並びにすると微妙に?高さがズレることがありますよね。

今回はそれを解決するためのTipsを共有したいと思います。

ソース

SNSシェアボタンを横並びにするにはいくつかの方法がありますが、table要素やinline-block要素で横並びする方法が簡単です。

今回はinline-block要素で実装したいと思います。

<!-- SNSシェアボタン -->
<ul class="sns-share-buttons">
  <li>twitter</li>
  <li>facebook</li>
  <li>hatena</li>
  <li>pocket</li>
</ul>
/* snsシェアボタン */
.sns-share-buttons{
  margin: 0;
  padding: 0;
}
.sns-share-buttons li{
  display: inline-block;
  vertical-align: top;
  line-height: 0;
  margin-right: 5px;
}


ここでポイントなのは、「line-height: 0;」を指定していることです。

冒頭にも書いたように、SNSシェアボタンを横並びにするとボタンの高さが微妙にズレる問題があります。

「line-height: 0;」を指定してあげることで、ボタンがちょっとズレる問題を解決できます。


では確認してみましょう。

ブラウザで見てみると・・・

f:id:chi_kun:20170411181446p:plain


ちゃんときれいに横並びになっていますね。



本日は以上です。