html – 为什么包含在内联块级元素内的块级元素显示为内联？

概述为了证明这个问题,我创造了一个小提琴： https://jsfiddle.net/vanillasnake21/bf0j0v5L/ <a> <span> close </span></a> < a> tag设置为display：inline-block和< span>显示：阻止,当< span>并未被< a>包围.标记它跨越页面的整个宽度,因为我期望块级元素应该.当如上所示用a标签括起来时, 为了证明这个问题,我创造了一个小提琴：
https://jsfiddle.net/vanillasnake21/bf0j0v5L/

<a>  <span> close </span></a>

< a> tag设置为display：inline-block和< span>显示：阻止,当< span>并未被< a>包围.标记它跨越页面的整个宽度,因为我期望块级元素应该.当如上所示用a标签括起来时,即使在开发工具中检查它仍然将其显示为块元素,它看起来就像显示为内联.为什么会发生这种情况,为什么没有< span>跨越< a>的整个宽度.元件？

解决方法 您的span元素无法占据页面的整个宽度.从技术上讲,您在内联块元素中呈现块级元素.所以你的块级元素确实占用了父宽度的100％.

由于没有为父内联块定义宽度,因此它占用了内联块元素中的任何空间.为了演示这一点,如果我为你的inline-block元素指定一些宽度,则span将获取父元素的所有可用宽度.

a {  display: inline-block;  padding: 1em 7em;  wIDth: 400px; /* define some wIDth here to the parent */  background-color: green;}

span {  background-color: red;  display: block;}a{  display: inline-block;  padding: 1em 7em;  wIDth: 400px;  background-color: green;}

<a>  <span> close </span></a>

Demo

在这里,当您为父内联块元素指定宽度时,您的跨度将获取它获得的所有宽度.

另一个例子,添加了Box-sizing来计算元素内部的填充,并附加宽度：100％;到父元素.

span {  background-color: red;  display: block;}a{  display: inline-block;  Box-sizing: border-Box;  padding: 1em 7em;  wIDth: 100%;  background-color: green;}

<a>  <span> close </span></a>

Demo 2

请注意,在内联块元素内呈现块级元素不会强制父元素占用文档上的所有可用水平空间.

总结

以上是内存溢出为你收集整理的html – 为什么包含在内联块级元素内的块级元素显示为内联？全部内容，希望文章能够帮你解决html – 为什么包含在内联块级元素内的块级元素显示为内联？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。