Question

如何重写此HTML以验证XHTML 1.0 Strict？

<div>
    <a href="link.html">
        <p>Some text</p>
        <ul>
            <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        </ul>
    </a>
</div>

我的目的是让整个div作为可点击链接。其中的内容仅描述目标页面的内容。 W3 Validator说我不能在span标记（<p>）中包含块元素（<a>）。

如何重新排列这个以便我的DIV保持阻止链接？

Answer 1

不允许在内联级别元素中包含块级元素，因此您有一些替代方法。

您可以在<a href="link.html">...</a>

中换行要链接的每一行

<div>
    <p><a href="link.html">Some text</a></p>
    <ul>
        <li><a href="link.html">Item 1</a></li>
        <li><a href="link.html">Item 2</a></li>
        <li><a href="link.html">Item 3</a></li>
    </ul>
</div>

您可以添加javascript onclick函数来重现相同的结果。

 //jQuery
 $('div').click(function() {
     window.location = 'link.html';
 });

 //Non jQuery
 document.getElementById('yourDiv').onclick = function() {
     window.location = 'link.html';
 }

如果您使用Javascript，请确保使用CSS显示内容是链接。我推荐伪类

div {
    text-decoration: underline;
    color: #0000FF;//or whatever your link color is
}
div li:hover, p:hover {
    color: #CC00FF;
    cursor: pointer;
}

Answer 2

您无法重新排列它以使该块成为链接。你可以做的是让块中的每个元素都成为一个链接，或者你可以使用javascript。

<div style="cursor:pointer" onclick="location.href='link.html'">
  <!-- ... -->
</div>

Answer 3

原样，您的片段是有效的HTML5。使用它代替你的问题消失。您所要做的就是将文档类型更改为<!doctype html>。

Answer 4

您的＆lt; UL＆gt;也是一个块元素，所以它也不会在那里工作。怎么样：

<div onclick="location.href = 'link.html'">
    <p>Some text</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

如何重写此HTML以验证XHTML 1.0 Strict？

4 个答案: