如何添加由圖像組成的兩個並排按鈕？

我想弄清楚如何並排添加兩個按鈕。該按鈕將成爲用戶點擊的圖像，然後轉到該網址。我嘗試在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>

來源

2013-10-09 user1632018

這可能會更好，不知道它對你是否可行。

.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-09 04:23:32

最後我用這個和它的偉大工程，唯一的問題是，按鈕不作爲鏈接。我無法點擊它們，並且懸停時光標不會更改。 – user1632018

這可能會更好地工作，不知道如果你是可行的。

<a class="storebtns" href="http://www.google.com"> 
    <img src="/img/btn.png" /> 
</a>

來源

2013-10-09 03:29:42

我可能無法正確認識這個問題，但如果你想兩個按鈕是並排有一個形象的背景下，嘗試：

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

和：

.storebtns { 
    padding:100%; 
    background:url("IMAGE_PATH_HERE"); 
}

來源

2013-10-09 03:54:01 1andsock

嘗試使用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-09 05:05:14

如何添加由圖像組成的兩個並排按鈕？

回答

相關問題