Question

是否有一种有效的非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; }

基本上你只是把这些东西的链接搞得一团糟。唯一的缺点是下面的文字是不可选择的。但这是有效的：）。

当然，您将遇到IE问题，请参阅此处的解决方案：problem with z-index of an empty div layer in IE8

Answer 2

使用html5。在html5中，这是允许的。

但请注意，某些浏览器会生成一个不同的DOM，它们会删除链接并将其放在每个块元素中。所以

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

将成为

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

没什么大不了的，但它可能搞砸了一些CSS选择器。

将标题，段落和列表的集合转换为一个超链接

2 个答案: