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

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

本质上，它在一行中显示“span”而不中断。在HTML中包装一个元素与另一个元素

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

它显示一个在另一个之下的跨度元素。我知道这是一个愚蠢的问题，但我很想知道这个事实！我的问题是，为什么内联元素在这里像块级元素一样行为？来自stackoverflow的任何好人...

来源

2013-12-11 rosemary

我已经editted我的问题。为什么内联元素在这里像块级元素一样行为？ – rosemary

span元素是内联元素，这意味着它们将始终占用线条上的空间，然后封装到下一行。

在第一个例子中，你有一个正常的div这是一个块级元素，将占用整条线（100％宽度）。这意味着跨度不会被包裹，除非宽度小于全部三个单词。

在第二个例子中，你有一个绝对定位的div。由于你没有给出这个宽度，所以它将和它内部最大的非分离元素一样宽 - 这是你的跨度中的单词之一。由于div现在只有一个字宽，跨度将包装。

This fiddle shows your second absolutely positioned div is only as wide as the largest non-breaking element

Have a look at this to understand block and inline elements

来源

2013-12-11 10:41:53 Pete

哇！什么答案......... thanxxx – rosemary

我仍然困惑！当我尝试将（1）外部div的位置更改为相对内部div，将绝对（2）外部div更改为绝对内部div，将相对（3）更改为仅具有绝对位置的单个div。在所有情况下，span元素都只显示一行而没有换行符。为什么是这样？ @Pete – rosemary

所有的元素仍然在一行中，因为你没有给你的绝对div一个宽度 - 你需要给绝对div的宽度大于所有单词的长度，如果你想要他们t留在同一行 – Pete

因为默认情况下a是一个块元素，它占用了它所在容器的全部宽度。“position：absolute”移除该宽度。如果您设置“宽度：100％”;对于具有绝对定位的元素，跨度将再次在一条线上不中断。

来源

2013-12-11 10:41:34

谢谢，这里是我的投票.. – rosemary

我仍然困惑！当我尝试将（1）外部div的位置更改为相对内部div，将绝对（2）外部div更改为绝对内部div，将相对（3）更改为仅具有绝对位置的单个div。在所有情况下，span元素都只显示一行而没有换行符。为什么是这样？ @Dan Goodspeed – rosemary

你能提供一个你的意思吗？ –

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

回答

相关问题