0

2つのボタンを並べて追加する方法を正確に理解しようとしています。ボタンは、ユーザーがクリックすると URL に移動する画像になります。インライン表示で CSS にクラスを追加しようとしましたが、追加のスタイル タグが追加されたボタンでそのクラスを呼び出す html を追加しました。ただし、ボタンは表示されません。

ボタンを並べて表示する必要がある場合、html コードにスタイル タグを直接追加せずにそれを行う方法がわかりません。これが、display: inline; でそれを変更する方法を私が知っている唯一の方法です。

これが私がやっている方法です：

CSS

.storebtns {

  display: inline;

}

HTML

<a class="storebtns" href="http://www.google.com" style="background-image: url(/img/btn.png);"></a>
4

4 に答える 4

1

質問を正しく理解していない可能性がありますが、2 つのボタンを並べて画像の背景にしたい場合は、次を試してください。

<a class="storebtns" href="#"></a>

と：

.storebtns {
    padding:100%;
    background:url("IMAGE_PATH_HERE");
}
于 2013-10-09T03:54:01.237 に答える
0

を使用してボタンを追加しul、フローティングさせ、css で背景画像を追加してみてください。

http://jsfiddle.net/nxEd5/

<body>
<h1>Click on a kitty.</p>
<div id="buttons">
    <ul>
        <li><a href="#">Button1</a></li>
        <li><a href="#">Button2</a></li>
    </ul>
</div><!--end buttons-->
</body>

CSSは次のとおりです。

ul li{
float:left;
list-style-type:none;

}

ul li a{
padding:40px;
text-decoration:none;
text-indent:-9999px;
background:url(img.jpg) no-repeat;
opacity:0.5;
display:inline-block;
}

ul li a:hover{
opacity:1.0;
}
于 2013-10-09T05:05:14.060 に答える
0

これはうまくいくかもしれませんが、それが実現可能かどうかはわかりません。

<a class="storebtns" href="http://www.google.com">
    <img src="/img/btn.png" />
</a>
于 2013-10-09T03:29:42.333 に答える