将一组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

您可以将div转换为span并将其设置为display:block

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

并使用

的css规则

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

Answer 3

使用一些JavaScript可以达到这个效果：

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

Answer 4

您可以使用Javascript处理链接：

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

Answer 5

不确定您是否正在寻找纯css解决方案。 Jquery允许您绑定click事件：

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

Answer 6

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

对HTML5有效。