如何增加<a>標籤按鈕的可點擊區域？

我從這post瞭解到，總是用<a>標籤或<button>標籤來製作按鈕。現在我正在嘗試使用<a>標記。我的問題是：有沒有辦法增加標籤可點擊區域？假設我在div盒中使用<a>。我想讓整個div盒成爲一個按鈕。我可以將點擊區域更改爲整個div框嗎？感謝您的幫助。如何增加<a>標籤按鈕的可點擊區域？

來源

2012-06-18 Ivan Wang

使用<a />當你需要一個連接（的錨一）。當你需要一個按鈕時使用<button />。

也就是說，如果您確實需要擴展<a />，請在其上添加CSS屬性display: block;。然後，您可以指定寬度和/或高度（即，就好像它是一個<div />）。

來源

2012-06-18 07:30:23 sp00m

這完美的作品，你的答案以光速進行。你的搖滾！非常感謝。 –

如果你擔心語義問題，t1m0thy的答案似乎是正確的選擇。請參閱：https://davidwalsh.name/html5-buttons – aldemarcalazans

如果您使用HTML 5，即DOCTYPE

<!doctype html>

那麼你可以只用block-level links。

<a href="google.com"> 
    <div class="hello"> 
    .. 
    </div> 
</a>

來源

2012-06-18 07:29:46 Alex

是的，你可以的，如果你正在使用HTML5，這個代碼是有效沒有其他：

<a href="#foo"><div>.......</div></a>

如果你不使用HTML5，你可以讓你的鏈接block：

<a href="#foo" id="link">Click Here</a>

CSS：

#link { 
    display : block; 
    width:100px; 
    height:40px; 
}

注意，你只能做你的鏈接塊級元素後應用width，height。

來源

2012-06-18 07:29:53 Sarfraz

此代碼與HTML5無關。早在HTML5規範開始之前，display屬性就已經存在於CSS中了。 – poncha

@poncha：對不起，錯誤地標記起初，告訴了這個：'

.......

'例如''div中''div'在html5中是有效的。 – Sarfraz

現在看起來更好;）+1爲此，因爲這提供了兩個解決方案 – poncha

只需將錨點display: block和width/height: 100%。例如：

.button a { 
    display: block; 
    width: 100%; 
    height: 100%; 
}

的jsfiddle：http://jsfiddle.net/4mHTa/

來源

2012-06-18 07:31:10

正是我所需要的，謝謝 –

您可以嘗試使用顯示：塊或顯示：inline-block的。一個很好的教程可以在這裏找到：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

來源

2012-06-18 07:34:17 DZittersteyn

要增加文本鏈接的區域，您可以使用下面的CSS;

a {  
display: inline-block;  
position: relative;  
z-index: 1;  
padding: 2em;  
margin: -2em; 
}

的襯墊增加了可點擊時，負餘量保持周圍因爲它應該是（超過研磨鏈接提防）文本的流動面積。顯示：內聯塊是必需的，這樣可以設置邊距和填充，並且位置需要是相對的，這樣z-index可以用來使可點擊區域保持在隨後的任何文本之上。

來源

2013-12-02 11:54:07 t1m0thy

完美的作品在我的情況。 –

這是真正的答案*如何增加標籤按鈕的可點擊面積* – StefansArya

實際上是如此聰明！ –

將padding添加到錨點標記的CSS類。如果需要，根據您需要的可點擊區域分別添加padding-top，padding-bottom，...。它爲我工作。

來源

2014-05-07 06:56:18 Ramesh

如何增加<a>標籤按鈕的可點擊區域？

回答

相關問題