カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

ソーシャルボタンを綺麗に並べる

この記事は最終更新日から1年以上経過しています。

ブログ記事等に設置しておきたいSNSのボタンを綺麗に並べる方法

ボタンはulタグでli内に設置します。
そしてinline-blockで表示し、縦位置を上にすればOK。

.social_buttons{
    text-align: left;
}
 
.social_buttons > li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}
 
.social_buttons > li:first-child {
    margin-left: 0;
}
 
.social_buttons > li:last-child {
    margin-right: 0;
}
 
.social_buttons iframe {
    margin: 0 !important;
}
 
@media screen and (max-width: 780px){
    .social_buttons > li{
        width: 80px !important;
        margin: 0 7px 10px 0;
    }
}
この記事がお役に立ちましたらシェアお願いします
1,511 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です