在 HTML 中将一个元素与另一个元素包装在一起

Question

<div>
 <span>oneoneoneone</span>
 <span>twooneoneone</span>
 <span>threeoneoneone</span>
</div>

从本质上讲，它在一行中显示"跨度"而不会中断。

<div style="position:absolute;background:red">
 <div style="position:absolute">
 <span>oneoneoneone</span>
 <span>twooneoneone</span>
 <span>threeoneoneone</span>
 </div>
</div>

它一个接一个地显示跨度元素。我知道这是一个愚蠢的问题，但我很好奇知道这个事实！我的问题是，为什么内联元素在这里表现得像块级元素？任何来自堆栈溢出的好人...

Answer 1

因为默认情况下，a 是一个块元素，它占据了它所在的容器的整个宽度。 "位置：绝对"删除该宽度。 如果将"width：100%;"设置为具有绝对定位的元素，则跨度将再次位于一行上而不会中断。

Answer 2

span元素是内联元素，这意味着它们在换行到下一行之前总是会占用一行上的空间。

在第一个示例中，您有一个普通的div它是一个块级元素，将占据整行(100% 宽度(。 这意味着除非宽度小于所有三个单词，否则跨度不会换行。

在第二个示例中，您有一个绝对定位的div。 由于您没有给这个div一个宽度，它将与其中最大的不间断元素一样宽 - 这是您跨度中的一个词。 由于div现在只有单词那么宽，因此跨度将换行。

这个小提琴显示你的第二个绝对定位的div只和最大的不间断元素一样宽

看看这个以了解块和内联元素