ツイートボタンやいいねボタンなどのsnsボタンを並べたとき、たまにこういうふうに頭がそろわない事がないでしょうか。
並びがガタガタであまり印象がよくないです。
というかFacebookボタンだけおかしい？
HTMLのソースはこんな感じです。
<aside class="sns_btn">
<ul>
<li>snsボタン</li>
<li>snsボタン</li>
<li>snsボタン</li>
</ul>
</aside>
(snsボタンのソースが長いので省略してます)
これらのボタンのliをfloatで横並びにしている状態です。
対処方法
方法は簡単で、snsボタンをくくっている要素のcssにline-heightを指定するだけです。
ポイントはline-heightを1.4以下にすること。
こんな感じです。
.sns_btn {
line-height: 1;
}
すると…
きれいにならびました。頭がちゃんとそろってます。
line-heightが1.5以上になるとFacebookボタンがずれてくるようです。
なので、サイトにline-heightを1.5以上にしている場合に起こる現象のようです。
bodyにline-heightを指定している場合が多いと思うので、気になるなぁと思ってた人は見てみてください。
いままでは各ボタンごとにmarginつけて調整してましたが、この方法で対処できそうです。
まぁどうせまたボタンの仕様変わったら崩れるんだろうなぁ。
その時はまたその時で考えます。
