noi*_*oio 4 html css css-position
我的问题很简单:绝对定位元素内的内联块元素会发生什么？我有一个例子来说明我的意思.否则很难解释.问题是为什么.icon内部的.tag位置不像前一个.icon(即内联和文本的右侧)
可以在http://jsbin.com/itole4/5上查看以下代码
<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>
实际上,图标的行为完全相同.要进行测试,请尝试将样式设置为
display: inline-block; width: 50px;
当您创建标记位置:绝对时,它会导致标记不再具有其父级的100%的自动宽度,而是根据浏览器中的启发式(依赖于浏览器)具有可以采用的最小宽度.内联块的作用类似于"内联",就像图像一样,因此在第一次机会(紧接在单词"tag"之后)被包裹到下一行.
所以简短的回答是:图标的行为相同,但包含它的块不是.
为了强制在同一行上的图标,如第一行,您可以添加white-space: pre;.请参阅:http://jsbin.com/itole4/6(另见下面的评论)