0

请帮我将这 3 个按钮水平排列，就像这张照片处理过的图像：

用photoshop制作

请看这里的代码。

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>​
4

3 回答 3

3

怎么样：

a {
    float:left;
}
​

或者

a {
    display:inline-block !important;
}
于 2012-06-15T15:54:36.713 回答
3 
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/

于 2012-06-15T15:56:48.443 回答
2

你可以加

float:left;

到每个按钮

http://jsfiddle.net/FzYkJ/2/

于 2012-06-15T15:54:26.103 回答