我听说将块元素放在内联元素中是 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 规范似乎是这样认为的:
display:block
样式表提供了指定任意元素呈现的方法,包括元素是呈现为块还是内联。在某些情况下,例如列表元素的内联样式,这可能是合适的,但一般来说,不鼓励作者以这种方式覆盖 HTML 元素的传统解释。
有人对这个问题有任何进一步的提示吗?
根据您要满足的 HTML 版本:
HTML 5 声明该<a>元素“可以围绕整个段落、列表、表格等,甚至整个部分,只要其中没有交互式内容(例如按钮或其他链接)”。
<a>
HTML 4.01 规定<a>元素只能包含内联元素。A<div>是块元素,因此它可能不会出现在<a>.
<div>
当然,您可以随意设置内联元素的样式,使其 看起来 像一个块,或者确实设置一个块的样式,使其内联呈现。HTML中术语inline和的使用block是指元素与文档语义结构的关系,而 CSS 中的相同术语更多地与元素的视觉样式相关。如果您使内联元素以块状方式显示,那很好。
inline
block
但是,您应该确保当 CSS 不存在时文档的结构仍然有意义,例如通过屏幕阅读器等辅助技术访问时 - 或者实际上在强大的 Googlebot 检查时。