div可點擊填充

我想讓我的整個div可點擊，所以我改變了div的鏈接樣式，因此它需要整個div的大小。但是，當我添加填充到div時，背景確實展開，但我的鏈接沒有。div可點擊填充

以下是我有：

HTML：

<div id="b_register"> 
<a href="#"> Register </a> 
</div>

CSS：

#b_register { 
    background-color: #CCCCCC; 
    display: block; 
    float: left; 
    font-size: 16px; 
    height: 20px; 
    margin-bottom: 5px; 
    margin-right: 5px; 
    padding: 10px; 
    text-align: center; 
    width: 110px; 
} 


#b_register a { 
    display: block; 
    height: 100%; 
    width: 100%; 
    text-decoration: none; 
    color:white; 
} 

#b_register:hover{ 
    background-color: #009FD6; 
}

或者你也可以去那裏
http://jsfiddle.net/EycDQ/1/

我要的是即使使用填充，也可以使div可點擊nd不使用div上的任何Onclick事件。

謝謝！

來源

2013-05-31 MrPanda

您的jsfiddle是否有工作？因爲它不在這裏。 –

我知道，這不是關於JS，而是HTML/CSS。我從我的真實代碼中改變了一些名字或鏈接，但沒有什麼重要。 – MrPanda

爲什麼不把<a>標籤圍繞<div>而不是其他方式？

<a href="#"> 
    <div id="b_register"> 
    Register 
    </div> 
</a>

來源

2013-05-31 13:15:19 Lily

我會試一試。編輯：謝謝，我不知道爲什麼我以前沒有想過這個！ – MrPanda

這不好。默認情況下，a是內聯元素，div是塊元素。內聯元素中不應包含塊元素。這不會通過驗證。 – mgamer

從2017年的小小更新 - 標籤環繞塊元素包裝現在完全酷。 –

我想你應該添加填充到你的標記和調整div大小。

#b_register a { 
    padding:10px; 
}

這裏有一個小提琴：

http://jsfiddle.net/EycDQ/7/

來源

2013-05-31 13:19:21 mgamer

謝謝，我也會試試這個，似乎是一個比根據mgamer的答案更好的方法 – MrPanda

如果你想要做的是簡單的，你可以簡單地添加事件onclick到您的div然後使用window.location = "Your_URL";改變位置

#b_register{cursor: pointer;} 

<div id="b_register" onclick="window.location='google.com'">Register</div>

來源

2013-05-31 13:23:21

你可以將背景顏色，懸停效果和填充移動到錨標記而不是div元素？

錨點將只能點擊它們的文本，除非它們具有某種背景，或者使用填充來擴展可點擊區域。如果出於某種原因，div必須具有背景顏色/懸停效果，則Spacer gif（1px by 1px transparent .gifs）用於需要透明的項目。

我已經修改了你的小提琴僅更改如下：

#b_register a { 
    background-color: #CCCCCC; 
    padding: 10px; 
    } 

    #b_register a:hover{ 
    background-color: #009FD6; 
    }

http://jsfiddle.net/EycDQ/9/

來源

2013-05-31 14:39:35 onyourmark

div可點擊填充

回答

相關問題