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; }
スポンサーリンク
コメント