可点击的<li>使用<a> tag - no JS to be used. Is it legal HTML?</a> </li>

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;
}

OR

LI > A
{
    display: block;
}

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

请注意，在HTML 5的当前草案中，在锚标记中放置比以前允许的更多元素是合法的（请参阅“允许的内容”和示例）：{{ 3}}

其他文章：http://dev.w3.org/html5/markup/a.html

Answer 2

如果您查看stackoverflow菜单，您会发现它非常简单。你将一个<a>放在<li>里面，把它放到显示块中，然后给它想要实现块感觉的填充。