可点击的< li>使用< a>标签 - 没有JS要使用。是合法的HTML吗？ [英] A clickable <li> using an <a> tag - no JS to be used. Is it legal HTML?

问题描述

好吧，我已经读了很多次，内联元素应该不包含块元素。我同意，有一些问题，它可以得到凌乱后。但我发现它是唯一的解决方案做以下：

Ok, I have read a lot of times that inline elements should never contain block elements. I agree, there are problems with that and it can get messy after. But I find it the only solution to do the following:

我试图创建一个模板，模拟Metro UI瓷砖的HTML模板（是的，在Windows 8）。使用< li> 元素制作图块。现在，问题是我想要的tile（整个< li> 标签）可点击，但适当的HTML告诉我你不能包围一个块元素与内联元件。此外，您不能使用< a> 环绕< li> 有没有任何方法这样做，而不违反html的规则？

I'm trying to create an HTML template that imitates the Metro UI "tiles" (yeah, the one that is in windows 8). The tiles are made using <li> elements. Now, the problem is that I want the tiles (the whole <li> tag) clickable, but proper HTML tells me you can't surround a block element with an inline element. Besides, you can't surround an <li> with an <a>. Is there any method of doing this without going against the rules of html?

推荐答案

一个合法和干净的方式完成这是使用 inline-block 的样式作为 A 标签，并让它们填满完整的 LI 。

A legal and clean way of accomplishing this is to use a style of inline-block for the A tags and let them fill the complete LI.

LI > A
{
    display: inline-block;
}

或

LI > A
{
    display: block;
}

这将在IE7 +以及所有最新版本的Firefox，Chrome，Safari ，Opera等。

This will work in IE7+, and all recent versions of Firefox, Chrome, Safari, Opera, etc.

请注意，在HTML 5的当前草案中，将更多元素放在锚点中是合法的标记（请参阅允许的内容和示例）： http://dev.w3.org/html5 /markup/a.html

Note that in the current draft of HTML 5, it is legal to put a greater variety of elements inside an anchor tag than was previously allowed (see "permitted content" and examples): http://dev.w3.org/html5/markup/a.html

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

这篇关于可点击的< li>使用< a>标签 - 没有JS要使用。是合法的HTML吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！