在锚中放置div是否正确?

我听说在内联元素中放入块元素是一种HTML错误:

<a href="http://example.com">
<div>
What we have here is a problem.
You see, an anchor element is an inline element,
and the div element is a block level element.
</div>
</a>

但是，如果在样式表中将外部锚设置为display:block呢?还是错的吗?HTML 4.01规范块级和内联元素似乎是这么认为的:

样式表提供了实现的方法 指定任意的呈现 元素，包括是否为元素 呈现为块或内联。在 有些情况，比如内联样式 对于列表元素，这可能是 恰当，但总的来说， 不鼓励作者 超越常规 HTML元素的解释 这种方式。< / p >

有没有人对这个问题有进一步的建议?

360610 次浏览
小开

如果你要努力制作<a>块，为什么不把<a>放在div里面，作为一个块元素，它会给你同样的效果。

小开

W3C文档没有使用错误的和罪这样的概念，但它使用了提供方法、可能是合适的和气馁这样的概念。

实际上，在第四节的第二段中，4.01规范列出了它的单词，如下所示

本文件中的关键字“必须”、“必须不”、“要求”、“应当”、“不应当”、“应该”、“不应该”、“建议”、“可能”和“可选”按[RFC2119]解释。但是，为了可读性，这些单词在本规范中不以所有大写字母出现。

考虑到这一点，我相信明确的声明在7.5.3块级和内联元素中，它说

通常，内联元素只能包含数据和其他内联元素。

条件“一般”似乎引入了足够的模糊性，说明HTML 4.01确实允许内联元素包含块元素。

当然，CSS2有一个显示属性值inline-block，它似乎适合您所描述的目的。我不确定它是否得到了广泛的支持，但似乎有人预见到了这种行为的需要。

这里的DTD似乎不那么宽容，但是DTD文本遵从规范:

HTML 4.01规范包含额外的 不能在内部表示的语法约束 dtd。< / p >

在另一个注释中，您建议通过将块包装在锚中使其激活。我不认为HTML禁止这样做，CSS显然允许这样做。因此，要回答标题中关于它是否正确的问题，我的回答是肯定的。按照标准，这有时是正确的。

小开

不，它不会验证，但它通常会在现代浏览器中工作。也就是说，在你的锚内使用一个span，并在它上面设置display: block，这肯定会在任何地方工作，它会验证!

小开

如果你将它更改为块风格元素，那么不，它不再是“错误的”，但它可能不会被验证。但你现在所做的并没有多大意义。你应该保持锚标记作为一个块级元素，没有内部div，或者把div放在外面。

小开

你不能把<div>放在<a>里面——这是无效的(X)HTML。

即使你用display: block样式一个span，你仍然不能把块级元素放在里面:(X)HTML仍然必须遵守(X)HTML DTD(无论你使用哪个)，不管CSS如何改变事情。

浏览器可能会按照您想要的方式显示它，但这并不意味着它是正确的。

小开
最佳答案

根据你要迎合的HTML版本:

  • HTML 5声明<a>元素“可以围绕整个段落，列表，表格等，甚至整个部分，只要其中没有交互内容(例如按钮或其他链接)”。

  • HTML 4.01指定<a>元素只能包含行内元素。<div>是块元素，所以它可能不会出现在<a>中。

    当然，您可以自由地样式一个内联元素，使它出现成为一个块，或者样式一个块，使它呈现为内联。在HTML中使用术语inline和block是指元素与文档语义结构的关系，而在CSS中使用相同的术语更多地与元素的视觉样式有关。如果您让内联元素以块状方式显示，那是可以的。

    但是，当CSS不存在时，您应该确保文档的结构仍然有意义，例如通过屏幕阅读器等辅助技术访问时，或者由强大的Googlebot检查时

小开

这是错误的。使用跨度。

小开

HTML 4在http://www.w3.org/TR/REC-html40/sgml/dtd.html有一个DTD。这个DTD是规范的机器可处理形式，限制了DTD管理XML和HTML 4，特别是“暂时的”类型，允许许多不是“合法的”XML的东西。不过，我认为它接近于编纂说明符的意图。

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->


<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">


<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">


<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >


<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">


<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

我将把这个层次结构中列出的标签解释为允许的标签总数。

虽然规范可能会说“内联元素”，但我非常确定，通过将块元素的显示类型声明为内联元素，就可以绕过这个意图。无论您如何滥用内联标记，它们都具有不同的语义。

另一方面，我发现有趣的是，special的包含似乎允许嵌套A元素。规范中可能有一些强硬的措辞禁止这样做，即使它在xml语法上是正确的，但我不会进一步讨论这个问题，因为这不是问题的主题。

小开

我认为大多数时候当人们问这个问题时，他们已经建立了一个只有div的网站，现在其中一个div需要是一个链接。

我看到有人使用一个透明的空图像，PNG，在一个锚标记中，只是为了在一个div中创建一个链接，并且图像的大小与div相同。

其实挺难过的……但这很有效……

小开

仅供参考。

如果你的目标是让你的div可点击，你可以使用jQuery / Java Script。

像这样定义你的div:

<div class="clickableDiv" style="cursor:pointer">
This is my div. Try clicking it!
</div>

然后你的jQuery将像这样实现:

 <script type="text/javascript">


$(document).ready(function () {


$("div.clickableDiv").click(function () {
alert("Peekaboo");
});
});
</script>

这也适用于多个潜水-根据汤姆的评论在这个线程

小开

HTML5规范…现在可以将块级元素放入内联元素中。所以现在在一个'a'元素里面放一个'div'或者'h1'是非常合适的。

小开

像<div>这样的块级元素可以用HTML5中的<a>标记来包装。虽然根据中数， <div>被认为是流内容的容器/包装器， <a>被认为是流内容。从语义上讲，创建作为块级元素的内联元素可能更好。

小开

如果你想避免在锚标记中放置div的语义问题，只需将锚标记放在与div相同的级别上，用一个position: relative的容器包装它们，使你的锚标记position: absolute，并展开它来填充容器。此外，如果它不在内容流的末尾，请确保在那里抛出一个z索引，将其置于内容之上。

按照建议，我已经添加了一个标记代码:

<div class="div__container>
<div class="div__one>
</div>
<div class="div__two">
</div>
<a href="#"></a>
</div>

还有css:

.div__container {
position: relative;
}
.div__container a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
小开

你可以通过添加"::before"伪元素来实现

纯CSS技巧;)

a:before{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0,0,0,0);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>

小开

2022年7月更新:最新HTML5版本

这是我从他们的网站上截取的一个例子:

<a href="/components/badge">
<div class="mat-list-item-content">
<div mat-ripple="" class="mat-ripple mat-list-item-ripple"></div>
<div class="mat-list-text"></div>
</div>
</a>
小开

任何方法都有用……直到你把它们嵌在一起。

你可以把表格、div、鸟和蜜蜂塞进去，浏览器会耐心地配合你。但是一旦你把另一个<a>标签放在里面，它就会把它们分开，把里面的标签放在外面的标签关闭之后。这值得一试，即使是在F12控制台，当你的浏览器不喜欢某些东西时，你会惊讶地发现它是多么严格。

所以没有这样的事情:

<a href="#1">
<a href="#2"> Now what </a>
</a>

相反，它将变成:

<a href="#1"></a>
<a href="#2"> Now what </a>

同样的事情发生在<p>和其他一些;事实上，有一篇关于这个的Stacko文章——我可以嵌套这些标签吗?——唯一的答案有关键，在“HTML规范指示”;部分寻找项目符号列表。最挑剔的显然是a和p，还有h1..h6。(现在让我们诚实地说:你是否曾经专门使用p标签，因为它给了你其他人没有的东西?……这么想的。我就把它扔了。)

博士TL; -你不能把a放在a里面。


提交答案