これはかなり単純な質問であることは知っていますが、私の人生ではそれを理解することができません。背景画像を適用した2つのリンクがあります。これは現在の外観です(影のことをお詫びします。ボタンの大まかなスケッチ)。
ただし、これらの2つのボタンを並べて表示する必要があります。アラインメントで何をする必要があるのか本当にわかりません。
これが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 2011
float:left;
両方div
のsに適用すると、完全に成功しました。コメントを回答として投稿できますか?ありがとう!
第二はある
—
JV
display: inline-block;
...しかし、それはあまりよくサポートしています
コンテナー内のfloat:leftは機能しますが、ボタンには<div>ではなく2つの<span>タグを使用してみます。
—
shiftycow
すでに述べたように、float:leftを追加します。#buyButtonと#galleryButtonに、clear:both;の別の要素を追加します。フローティングをクリアします。div(ブロック要素)を使用して<a>をラップする理由
—
ludesign
float:left;