我知道这是一个相当简单的问题,但我无法一生解决。我有两个链接,这些链接已应用了背景图片。这是当前的样子(对阴影表示歉意,只是按钮的粗略草图):
但是,我希望这两个按钮可以并排放置。我真的无法弄清楚对齐需要做什么。
这是HTML
<div id="dB"}>
<a href="http://notareallink.com" title="Download" id="buyButton">Download</a>
</div>
<div id="gB">
<a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>
</div>
这是CSS
#buyButton {
background: url("assets/buy.png") 0 0 no-repeat;
display:block;
height:80px;
width:232px;
text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}
#galleryButton {
background: url("images/galleryButton.png") 0 0 no-repeat;
display:block;
height:80px;
width:230px;
text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}
@ JCOC611:完美地适用
—
sudo rm -rf
float:left;
于两个div
。您可以发表评论作为答案吗?谢谢!
第二个是,
—
合资公司
display: inline-block;
但是它得到的支持较少……
float:left可以放在容器中,但是我会尝试使用两个<span>标记代替按钮的<div>。
—
shiftycow 2011年
如前所述,添加float:left; 到#buyButton和#galleryButton,然后添加另一个带有clear的元素:清除浮动。为什么使用div(块元素)包装<a>?
—
ludesign 2011年
float:left;