可點擊的div鏈接，但內部有一個列表（驗證）

Question

目標是一個可點擊作爲鏈接的方形div，其中包含一個列表。

這證實：

<div class="game"> 
    <a href="link.html"> 
     <img src="image.png" /> 
     <span class="name">Name</span> 
    </a> 
</div> 

，並與<a>設置爲display: block我得到的完全可點擊的div效果我想要的。

但這種顯而易見的原因，不驗證（即使瀏覽器都使其工作）：

<div class="game"> 
    <a href="link.html"> 
     <span class="name">Name</span> 
     <ul> 
      <li>Thing 1</li> 
      <li>Thing 2</li> 
      <li>Thing X</li> 
     </ul> 
    </a> 
</div> 

有沒有辦法讓我的DIV中的列表，對整個DIV是一個塊鏈接，並仍然驗證？

Answer 1

把onclick事件您股利和廢除錨乾脆：

<div class="game" onclick="location.href='link.html';" style="cursor: pointer;"> 
    <span class="name">Name</span> 
    <ul> 
     <li>Thing 1</li> 
     <li>Thing 2</li> 
     <li>Thing X</li> 
    </ul> 
</div> 

不是很漂亮，但它應該驗證。

編輯：也大多數瀏覽器罰款與div：懸停CSS，所以你仍然應該能夠得到你的錨風格的CSS。

Answer 2

它可能不是有效的HTML4，但它絕對是有效的HTML5 - 在HTML5中，您可以在<a>之內有<ul> s。