「いいねボタン」のズレはCSSで解消するかも
このサイトでも、記事タイトルの上部にソーシャルボタンを横並びに配置しています。
現在は、綺麗に配置できていますが、少し前までは「いいね」ボタンだけズレていました。
具体的には「いいねボタン」だけ、他のボタンと高さが合わなかったのです。
これの修正方法を調べたのですが、どうやら「line-height」が原因のようでした。
そこで【line-height: 0;】をCSSに追記することに。
このサイトのソーシャルボタンは、liタグで囲み、横並びに配置しています。
そこで、以下の様にliタグに【line-height: 0;】を追記しました。
li {line-height: 0;}
このように記述すると、問題は一発で解決!
「いいねボタン」が他の要素と高さが揃いキレイに表示されるようになりました。
同じように「いいねボタン」の高さが揃わないで困っている方。
今回の方法であっけなく解決するかもしれませんよ!
まとめ
いいねボタンのズレを解消する方法をご紹介しました。
【line-height: 0;】を追記するだけと、以外と簡単に解決してしまいました。
落ち着いて問題点を探ると、あっさりと解決方法が見つかりますね!
今回の内容がどなたかのお役に立てば幸いです。
コメントを残す