0

我试图弄清楚如何并排添加两个按钮。该按钮将是用户单击的图像，然后它会转到 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

我可能没有正确理解这个问题，但是如果您希望两个按钮并排并具有图像背景，请尝试：

<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

这可能会更好，不确定它是否适合您。

.storebtns
{
float:left;
width:100px;
}


<a class="storebtns" href="http://www.google.com">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSUZXG8Fd-auKjn_fLKsFtHMIarXLlcnDoTAvV86PSxmJFLwYgzJQ" width="100"/>
</a>
<a class="storebtns" href="http://www.stackoverflow.com">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSHUhwMHx9nciceUQQ5X5Id7pK9pFeAXPRVc0BhunO5zt49OvNiag" width="100" />
</a>

这是一个工作示例Here

于 2013-10-09T04:23:32.227 回答
0

这可能会更好，不确定它是否适合您。

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