【CSS】Facebookの「いいねボタン」の位置がズレる時の対処法ツイートソーシャルボタンを横並びにしたとき、Facebookのいいねボタンだけ位置が下にズレる!そんな時はCSSで解決です。いくつかのソーシャルボタンを「inline-block」を使って横並びにしたとき、ほとんどの場合いいねボタンだけ下にズレます。これめちゃくちゃ気になるんですが、色々なブログやサイトで放置されているんですよね...原因が探り難いのが理由だとは思いますが。この気持ち悪い現象はたった3行のCSSで解決できます。ソースHTML部分は普通です。各々コードを突っ込んでください。class="socialWrap"><div><!--ツイートボタン--></div><div><!--いいねボタン--></div><div><!--はてブ--></div><div><!--Pocket--></div></div>続いてCSS部分ですが、これだけの記述で下揃え・横並びの綺麗なソーシャルボタンボックスが作れます。!important;}この10~12行目が、いいねボタンのズレを直すための記述です。bottom;」が指定されているのが分かるかと思います。!important;」で打ち消せば、他のソーシャルボタンと同じライン上にボタンが配置されるようになるというわけです。こりゃ確かに気付きにくいですわ。自分のブログを見てこの現象が起きていたら、サクッと修正しておきましょう。北海道在住の元気な22歳。右手に酒、左手に煙草、目の前にPCという生活。クズだけどいい人(ただし彼女はいない)。今欲しいのはリボルトの実機。