メインコンテンツに移動
複数のソーシャルボタンの並びずれがあるので、cssで簡単に配置調整
やりたいこと:複数のソーシャルリンクボタンを一行に配置
- 複数のソーシャルリンクボタン(例:Twitter、FacebookのFollowボタン)を一行に配置したいです
問題点:ボタンが同じライン上に揃っていない
- 各ボタンのcss設定が違うため、一行配置時に、同じラインに揃えるのは難しいです
- FacebookのFollowボタンのcss設定が時にその要素のstyleに書き込んだため、追加したcssファイルの設定が優先度低いため、上書きすることが難しいです(!impotantキーワード使用だったら可能かな?)
解決:ボタンをラップする親ボックスの配置を調整
- ボタンを構成する要素のcssの上書きが難しい場合、ボタンをラップするブロックの配置場所を調整することより、ボタンを揃えます
- 例:FacebookのFollowボタンをラップする親クラス:class=”fb-follow”のcss設定に、top:-2pxを設定すれば、二つのボタンを一行に揃えました。