[英]Arranging buttons side by side
請幫助我像這張photoshopped圖片一樣水平排列這3個按鈕:
請在這里查看代碼。
CSS:
a.facebookbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat 0 0;
width: 132px;
height: 52px;
display: block;
}
a.facebookbt:hover { background-position: 0 -52px; }
a.facebookbt:active { background-position: 0 -104px; }
a.twitterbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat -132px 0;
width: 132px;
height: 52px;
display: block;
}
a.twitterbt:hover { background-position: -132px -52px; }
a.twitterbt:active { background-position: -132px -104px; }
a.abpbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat -265px 0;
width: 286px;
height: 50px;
display: block;
}
a.abpbt:hover { background-position: -265px -52px; }
a.abpbt:active { background-position: -265px -104px; }
HTML:
<a class="facebookbt" href="javascript:;"></a>
<a class="twitterbt" href="javascript:;"></a>
<a class="abpbt" href="javascript:;"></a>
怎么樣:
a {
float:left;
}
要么
a {
display:inline-block !important;
}
a { float:right; margin-left: 5px;}
並將html標記更改為這種方式:
<a class="abpbt" href="javascript:;"></a>
<a class="twitterbt" href="javascript:;"></a>
<a class="facebookbt" href="javascript:;"></a>
這樣,布局將按照正確的順序(如您的屏幕截圖) 向右對齊 。
演示 : http : //jsfiddle.net/FzYkJ/12/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.