可点击的<li>使用<a>标签 - 不使用JS.这是合法的HTML吗？

Question

好吧,我已经多次读过内联元素永远不应该包含块元素.我同意,这有问题,之后会变得混乱.但我发现它是执行以下操作的唯一解决方案:

我正在尝试创建一个模仿Metro UI"tiles"的HTML模板(是的,是Windows 8中的那个).瓷砖是使用<li>元素制作的.现在,问题是我希望tile(整个<li>标签)可以点击,但正确的HTML告诉我你不能用一个内联元素包围一个块元素.此外,你不能围绕<li>一个<a>.有没有任何方法这样做而不违反HTML的规则？

Answer 1

实现这一目标的合法而简洁的方法是使用标签的样式并让它们填充完整inline-block的A标签LI.

LI > A
{
    display: inline-block;
}

要么

LI > A
{
    display: block;
}

这将适用于IE7 +,以及所有最新版本的Firefox,Chrome,Safari,Opera等.

请注意,在HTML 5 的当前草案中,在锚标记中放置比以前允许的更多种元素是合法的(请参阅"允许的内容"和示例):http://dev.w3.org/html5/标记/ a.html

其他文章:http://html5doctor.com/block-level-links-in-html-5/