嵌入块内部位置：绝对元素

我的问题很简单：在绝对定位的元素内嵌入块元素会发生什么？我有一个小例子来说明我的意思。否则很难解释。现在的问题是，为什么.icon内.tag的不定位像以前.icon（即在线和文本的右边）嵌入块内部位置：绝对元素

<html> 
<head> 
    <style> 
     .field { position: relative; border: 2px solid black;} 
     .tag { position: absolute; left: 100%; top: -2px; background: black; color: white;} 
     .icon { width:16px;height:16px; display: inline-block; background: gray; text-indent: -999px;} 
    </style> 
</head> 
<body> 
    <a>Some text <span class='icon'>X</span> </a> 
    <h2> 
     <span class='field'>Some Text<span class='tag'> tag<span class='icon'>x</span></span></span> 
    </h2> 
    <h2> 
     <span class='field'>Some Text</span> 
    </h2>  
</body> 
</html>

来源

2011-04-09 noio

这可能是因为您未关闭所有跨度。此行缺少一个： <跨度类= '场'>某些文本<跨度类= '标签'>标记的 X – Thorgeir 2011-04-09 17:00:35

良好的观察，这没有解决但问题。我认为Chrome浏览器很聪明，可以在看到''时关闭该标签。 – noio 2011-04-09 18:30:47

您可以尝试为.tag定义宽度，以确保它不会环绕。 – tkm256 2011-04-09 18:36:30

其实，图标的作用完全一样。为了测试，尝试的样式设置为

display: inline-block; width: 50px;

当你犯了一个标签的位置是：绝对的，它会导致标签不再有其父的100％自动宽度，而是具有最小宽度它可以根据浏览器内的启发式（取决于浏览器）。内联块像图像一样“内联”，因此在第一次机会（即在“标签”单词后面）被包装到下一行。

所以简短的答案是：图标的行为相同，但包含它的块不是。

为了强制图标在同一行上，就像第一行一样，您可以添加white-space: pre;。请参阅：http://jsbin.com/itole4/6（见下文评论）

来源

2011-04-09 18:38:43 Sajid

谢谢！我不知道这个“位置：绝对”与宽度无关。有没有办法让'.icon'显示在“tag”旁边，而不将宽度设置为固定大小？ – noio 2011-04-09 19:58:32

是的，你可以做“[空格]（https://developer.mozilla.org/en/CSS/white-space）：pre;”强制阻止换行符，除了
标记。显然，这会阻止你保持文本流畅。另一种方法可能是将标签和图标包装在白色空间设置为预先设置的范围内，然后将白色空间设置为预先设置的范围，然后以此方式将损坏限制在您需要的地方。 – Sajid 2011-04-09 20:31:28

@Sajid我经历了一个类似晦涩/抽象的问题（至少对我来说），一旦定位被应用，文字就会落在图标下方。这个空白的建议解决了我的问题。 – 2015-07-25 01:38:15

因为.field有位置relative，如果你将添加.icon风格：position:absolute;top:0px;的.field的.icon内将在“0像素”被添加在.field的顶部不是body

我无法用英语来解释它>。 <，我希望你能理解

来源

2011-04-09 18:35:51 John

它不是定位 - 它包含了“图标” class..in一个你已经有了一个简单的inlinea其他嵌套设置的元素如果母公司是块级别h2这意味着您的“内嵌块”具有不同的线高度和垂直对齐方式

来源

2011-04-09 18:46:23 clairesuzy

嵌入块内部位置：绝对元素

回答

相关问题