首页 文章

将div放入锚中是否正确？

提问于
浏览 次
460

我听说将一个块元素放在内联元素中是一个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元素的传统解释 .

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

html

13 回答

  • 13

    这是不对的 . 使用span .

    回复于
  • 1

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

    回复于
  • 4

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

    回复于
  • -7

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

    回复于
  • 72

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

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

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

    回复于
  • 653

    如果你想避免将div放在锚标签中的语义问题，只需将锚标记放在与div相同的级别上，用一个位置为relative的容器将它们全部包装起来，使你的锚标记位置：绝对并将其扩展为填满容器 . 此外，如果它不在内容流的末尾，请确保在其中放置一个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;
}
    回复于
  • 2

    根据您要使用的HTML版本：

    • HTML 5 表示 <a> 元素"may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)" .

    • HTML 4.01 指定 <a> 元素只能包含inline elements . <div> 是block element，因此它可能不会出现在 <a> 中 .

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

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

    回复于
  • 1

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

    回复于
  • 0

    W3C文档不使用像错误和罪恶这样的概念，但它确实使用那些提供手段，可能适当和沮丧的概念 .

    实际上，在section 4的第二段中，4.01规范将其单词逐项列举如下

    本文件中的关键词“必须”，“必须”，“不需要”，“应该”，“不应该”，“应该”，“不应该”，“推荐”，“可以”和“可选”应按[RFC2119]中的描述进行解释 . 但是，为了便于阅读，这些词在本说明书中并未以全大写字母出现 .

    考虑到这一点，我相信最终的声明是在 7.5.3 Block-level and inline elements ，它说

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

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

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

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

    HTML 4.01规范包含无法在DTD中表达的其他语法约束 .

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

    回复于
  • 2

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

    回复于
  • 3

    你不能把 <div> 放在 <a> 里面 - 它是无效的（X）HTML .

    即使你使用display：block设置一个span，你仍然无法将块级元素放入其中：（X）HTML仍然必须服从（X）HTML DTD（无论你使用哪一个），无论CSS如何改变一切 .

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

    回复于
  • 28

    在http://www.w3.org/TR/REC-html40/sgml/dtd.html有一个HTML 4的DTD . 这个DTD是规范的机器可处理形式，DTD管理XML和HTML 4的限制，特别是"transient"风格，允许很多不是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">

    我会将此层次结构中列出的标记解释为允许的标记总数 .

    虽然规范可能会说"inline elements,"我不打算通过声明块元素的显示类型为内联来绕过意图 . 内联标签具有不同的语义，无论您如何滥用它们 .

    另一方面，我发现包含 special 似乎允许嵌套 A 元素是有趣的 . 有's probably some strong wording in the spec that disallows this even if it'的XML语法正确但我赢了't pursue this further as it'不是问题的主题 .

    回复于
  • 0

    就像一个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在这个帖子中的评论

    回复于

相关问题