打開一組的div到鏈接

Question

我有列表元素這樣的：

<div class="outer"> 
    <div>Head</div> 
    <div>Content</div> 
</div> 

我想有是什麼樣的，如果你把它包裝（但不幸的是北京時間不能在整個外層div鏈接有效）

我知道可以使用「display：block」作爲div中的「a」標籤，以獲得div的全部大小，但不幸的是div的大小取決於（動態）內容，因此不通過CSS設置。這意味着如果我將所述「a」標籤的寬度和高度設置爲100％，那麼它將採用外部div的父級大小。

有沒有一個有效的解決方案呢？

Answer 1

以下可能的工作：

<div class="outer"> 
    <a href="" class="spec_link"></a> 
    <div>Head</div> 
    <div>Content</div> 
</div> 

和css：

.outer{ position:relative;} 

.outer .spec_link{ 
display:block; 
position:absolute; 
top:0; 
left:0; 
bottom:0; 
right:0; 
} 

無論鏈接的大小如何，鏈接都會圍繞外部環繞。我做的透明度塊類似的東西

Answer 2

使用JavaScript代碼，你可以達到這樣的效果：

<div class="outer" style="cursor:pointer;" 
    onclick="document.location='somepage.html';"> 
    <div>Head</div> 
    <div>Content</div> 
</div> 

Answer 3

您可以處理的JavaScript的鏈接：

<div class="outer" onclick="window.location.replace('yourlink.html');"> 
    <div>Head</div> 
    <div>Content</div> 
</div> 

Answer 4

你可以轉換div到span並將它們設置爲display:block

<a href="..." class="forced"> 
    <span class="outer"> 
     <span>Head</span> 
     <span>Content</span> 
    </span> 
</a> 

，並使用

.forced, .forced .outer, .forced .outer > span{ 
    display:block; 
} 

Answer 5

不知道CSS規則，如果你正在尋找爲純粹的CSS解決方案。 jQuery的可以讓你綁定一個click事件：

jQuery('.outer').click(function() { 
    window.location = 'http://www.google.com/'; 
}); 

Answer 6

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

與HTML5有效。