共有・ソーシャルボタンの横幅を調整して横一列に並べる方法(CSS)

Twitterやはてブ等のボタンを横一列に並べて表示する方法について、Twitter、はてブ、Google+1ボタンの横幅を調整して横一列に並べる方法(CSS3)に書きましたが、CSS3がサポートされていないブラウザもあるのでCSSで設定する方法についてもメモ書きしようと思います。

share_button4

下のHTMLタグにある「ボタンのソースコード」の部分に取得したコードをコピー(貼り付け)します。

<div id="share">

  <div class="share-button1">ボタンのソースコード1</div>
  <div class="share-button2">ボタンのソースコード2</div>
  <div class="share-button3">ボタンのソースコード3</div>

</div>

CSSでは、float:leftを設定して左並びにします。
また、ボタンの横幅を変えるには、widthを追加して値を設定します。
最後にボタンの横に記事が回り込まないようにafterでコンテンツ作成しブロックしてクリア設定します。

#share {
  display:block
  width: 100%;
}
.share-button1 {
  float: left;
  width:110px !important;
}
.share-button2 {
  float: left;
}
.share-button3{
  float: left;
}
#share:after {
 content: ""; 
 display: block; 
 clear: both;
}

コメントを残す

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