Inline-Block内部位置:绝对的元素

My question is simple: what happens to inline-block elements inside of absolutely positioned elements? I have a little example to illustrate what I mean. It's hard to explain otherwise. The question is why the .icon inside of the .tag is not positioned like the previous .icon (that is, inline and to the right of the text)

我的问题很简单:在绝对定位的元素中，行块元素会发生什么变化?我有一个小例子来说明我的意思。否则很难解释。问题是为什么。tag内的。icon不像前面的。icon(也就是说，内联，在文本的右边)那样被放置

The code below can be viewed @ http://jsbin.com/itole4/5

下面的代码可以查看@ 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>

3 个解决方案

#1

Actually, the icon is acting exactly the same. To test, try setting a's style to

实际上，这个图标的作用是完全一样的。要测试，请尝试将a的样式设置为

display: inline-block; width: 50px;

When you make a tag position: absolute, it causes the tag to no longer have an automatic width of 100% of its parent, but rather to have the minimal width it can take according to heuristics within the browser (browser-dependent). The inline block acts like "inline", like an image, and is thus wrapped to the next line at the first chance (which is right after the word "tag").

当你做一个标签的位置:绝对的，它会使标签不再有100%的自动宽度，而是有最小的宽度，它可以根据浏览器中的启发式(浏览器依赖)。内联块的作用类似于“内联”，类似于图像，因此在第一时间被包装到下一行(就在“tag”后面)。

So the short answer is: the icon is acting the same, but the block containing it is not.

所以简单的答案是:图标的作用是一样的，但是包含它的块不是。

In order to force the icon on the same line, as on the first line, you can add white-space: pre;. See: http://jsbin.com/itole4/6 (also see comment below)

为了在同一行上强制图标，如第一行，您可以添加空格:pre;。参见:http://jsbin.com/itole4/6

#2

because the .field has position relative and if you will add the .icon with style : position:absolute;top:0px; inside of the .field the .icon will be added on '0px' on top of the .field not of body

因为。field有相对位置，如果你要添加。图标，样式是:position:absolute;top:0px;在.field内，.icon将添加到.field上面的'0px'上，而不是body

I can't explain it better in English >.<, i hope you can understand

我无法用英语更好地解释它。我希望你能理解。

#3

it's not the positioning - it's the element containing the "icon" class..in one you've got a plain inline a the other a nested setup where the parent is an block level h2 this means your "inline-bock" has different line-heights and vertical alignment

它不是定位，而是包含“图标”类的元素。其中一个是普通的内联，另一个是嵌套的设置，父类是块级h2这意味着你的“inline-bock”有不同的线高和垂直对齐

#1