Twitterやはてブ等のボタンを横一列に並べて表示する方法について、Twitter、はてブ、Google+1ボタンの横幅を調整して横一列に並べる方法(CSS3)に書きましたが、CSS3がサポートされていないブラウザもあるのでCSSで設定する方法についてもメモ書きしようと思います。
![]()
下の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;
}
スポンサーリンク


コメント