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

它可能不是有效的HTML4，但它绝对是有效的HTML5 - 在HTML5中，您可以<ul>内有<a>个。

Answer 2

在你的div上放一个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：hover css，这样你仍然可以获得你的锚式css。

可点击的div链接，但里面有一个列表（验证）

2 个答案: