Question

我创造了一个小提琴，只是为了证明这个问题： https://jsfiddle.net/vanillasnake21/bf0j0v5L/

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

当<a>标记未包含display:inline-block时，<span>标记设为display:block而<span>为<a>它跨越页面的整个宽度，因为我期望块级元素应该。当如上所示用a标签括起来时，即使在开发工具中检查它仍然将其显示为块元素，它看起来就像显示为内联。为什么会发生这种情况，为什么<span>不会跨越<a>元素的整个宽度？

Answer 1

您的span元素无法占据整个页面宽度。从技术上讲，您在内联块元素中呈现块级别元素。因此，您的块级元素确实占用父宽度的100％。

由于没有为父width定义inline-block，因此它会占用inline-block元素内的任何空间。为了证明这一点，如果我将一些width分配给您的inline-block元素，span将获取父元素的所有可用宽度。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Demo

在这里，您的span会获取您为父内联块元素指定width所获得的所有宽度。

另一个示例，添加box-sizing来计算元素内的padding，并将width: 100%;附加到父元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Demo 2

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

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

1 个答案: