Question

我听说将一个块元素放在内联元素中是一个HTML罪恶：

<a href="http://www.mydomain.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呢？还是错吗？ block-level and inline elements上的HTML 4.01规范似乎这么认为：

样式表提供了手段指定任意渲染元素，包括元素呈现为块或内联。在某些情况，例如内联样式对于列表元素，这可能是适当的，但一般来说，作者不鼓励压倒传统的对HTML元素的解释这样。

有没有人对此问题有任何进一步的提示？

Answer 1

取决于您所关注的HTML版本：

HTML 5 声明<a>元素可以包裹整个段落，列表，表格等等，甚至整个部分，只要内部没有互动内容（例如按钮或其他链接）“。
HTML 4.01 指定<a>元素只能包含inline elements。 <div>是block element，因此它可能不会显示在<a>内。

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

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

Answer 2

不，它不会验证，但是它通常可以在现代浏览器中使用。话虽如此，在你的锚中使用一个span，并在它上面设置display: block，这肯定会在任何地方都有效，它会验证！

Answer 3

W3C doc不使用错误和 sin 之类的概念，但它确实使用像那样提供方法，可能是适当的和气馁。

实际上，在section 4的第二段中，4.01规范将其单词逐条列出

关键词“必须”，“绝不”，“必须”，“应该”，“不应该”，“应该”，“不应该”，“推荐”，“可以”和“可选”本文件的解释如[RFC2119]所述。但是，为了便于阅读，这些词在本规范中并未以全部大写字母出现。

考虑到这一点，我认为最终的陈述是在 7.5.3块级和内联元素中，其中

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

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

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

DTD似乎不太宽容，但text of the DTD遵循规范：

HTML 4.01规范包含其他内容无法表达的句法约束 DTD。

在另一条评论中，您建议您通过将其包装在锚点中来激活块。我不相信HTML禁止这一点，CSS明确允许它。因此，为了回答关于它是否正确的标题问题，我说是的。按照标准，它有时是正确的。

Answer 4

使用HTML5规范......现在可以将块级元素放在内联元素中。所以现在把'div'或'h1'放在'a'元素中是完全合适的。

Answer 5

您无法将<div>置于<a>内 - 它无效（X）HTML。

即使您使用display：block设置了一个span，你仍然无法将块级元素放入其中：（X）HTML仍然必须遵守（X）HTML DTD（无论你使用哪一个），无论如何CSS如何改变事物。

浏览器可能会根据您的需要显示它，但这并不是正确的。

Answer 6

在http://www.w3.org/TR/REC-html40/sgml/dtd.html处有一个HTML 4的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语法上是正确的，也不允许这样做，但我不会进一步追求这一点，因为它不是问题的主题。

Answer 7

这是错的。使用span。

Answer 8

像<div>这样的块级元素可以由HTML5中的<a>标记包装。虽然根据container/wrapper for flow content，<div>被视为flow content而<a>被视为MDN。从语义上讲，创建充当块级元素的内联元素可能更好。

Answer 9

如果您打算进行<a>阻止，为什么不将<a>放在div中，作为一个块元素，它会给你相同的效果。

Answer 10

如果您将其更改为块样式元素，那么不，它不再是'错误'，但它可能无法验证。但做你正在做的事情没有多大意义。您应该将锚标记保持为没有内部div的块级元素，或者将div放在外部。

Answer 11

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

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

实际上很伤心......但它确实有效......

Answer 12

如果要避免将div放置在锚标记中的语义麻烦，只需将锚标记放置在与div相同的水平上，然后将它们全部包装在具有位置：相对的容器中，将锚标记的位置设置为：绝对和展开以填充容器。另外，如果不在内容流的末尾，请确保将z-index放在其中，以将其放置在内容上方。

根据建议，我添加了一个标记代码：

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

Answer 13

您可以通过添加“ :: 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>

Answer 14

就像一个FYI。

如果您的目标是使您的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>

这也可以用于多个div - 根据Tom在这个帖子中的评论

将div放入锚中是否正确？

14 个答案: