見出し、段落、リストのコレクションを1つのハイパーリンクに変える

Question

見出し、段落、およびリストのコレクションを1つのURLにする有効な非js方法はありますか？ （広告のように？）

<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はブロック要素として表示になりたいです。

乾杯

Answer 1

これを行うにはあまり醜い方法かもしれないが、：

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; } 

基本的には、わずかのリンクをpustもの。欠点は、下のテキストが選択できないことだけです。しかしそれは有効です:)。 problem with z-index of an empty div layer in IE8

Answer 2

使用HTML5：あなたはIEに問題がありますもちろん

は、ここに解決策を参照してください。 html5ではこれが許されます。

しかし、一部のブラウザではリンクを削除してすべてのブロック要素内に配置する異なるDOMを生成することに注意してください。だから、

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

は

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

未契約のその大きなになりますが、それは台無しにいくつかのCSSセレクタをすることがあります。