把標題，段落和列表集合成一個超鏈接

是否有一種有效的非js方法將標題，段落和列表的集合轉換爲一個url？（像廣告？）把標題，段落和列表集合成一個超鏈接

<a href="http://www.example.com" class="allclickable"> 
     <h2>Fresh Bread</h2> 
     <p>Delivered to your door</p> 
     <ul> 
      <li>Daily</li> 
      <li>Fresh</li> 
      <li>Bread</li> 
     </ul> 
</a>

這並不驗證，我也想在href被顯示爲塊元素（所以也文本週圍的空間可點擊）。

乾杯

來源

2011-01-14 Moak

可能是一個不太難看的方式來做到這一點，但：

HTML：

<div id="wrapper"> 
<h2>Fresh Bread</h2> 
... 
<a class="allclickable" href="http://www.example.com"></a> 
</div>

CSS：

#wrapper { position: relative; } 
.allclickable { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

基本上你只的休閒區通過鏈接東東。唯一的缺點是下面的文本是不可選擇的。但它是有效的:)。

當然，你將不得不使用IE瀏覽器的問題，看到這裏的解決方案：problem with z-index of an empty div layer in IE8

來源

2011-01-14 13:46:37 kapa

您還需要添加'width：100％;身高：100％;' – Gerben 2011-01-14 13:52:05

沒有。鏈接將被拉伸到父級大小。 – kapa 2011-01-14 13:56:17

使用HTML5。在html5中，這是允許的。

但請注意，某些瀏覽器會生成一個不同的DOM，他們將刪除鏈接並將其放置在每個塊元素中。所以

<a><h3>header</h3><p>para</p></a>

將成爲

<h3><a>header</a></h3><p><a>para</a></p>.

不是什麼大不了的事，但它可能會搞砸一些CSS選擇器。

來源

2011-01-14 13:50:14 Gerben

把標題，段落和列表集合成一個超鏈接

回答

相關問題