绝对定位时，内联块的大小不适合其子级

【问题标题】：inline block not sizing to fit its children when positioned absolutely绝对定位时，内联块的大小不适合其子级
【发布时间】：2015-06-17 14:30:17
【问题描述】：

这是我的问题：http://jsfiddle.net/875190we/

        <div style = "display:inline-block">
        <span>a</span>
        <span style = "position:relative;top:-1px; font-size:13px">x</span> 3
    </div>

我想说“ax3”（就像它不包含在绝对元素中一样）。

我使用绝对性将其定位在灰色元素的右侧和外部。我基本上希望这个元素位于灰色元素的右侧（它本身位于更大的文档结构中）。但是第二次我将 inline-block 放置在绝对定位元素的内部时，它会停止适合其子元素。

【问题讨论】：

这是您的要求吗？ jsfiddle.net/875190we/3
喜欢这个jsfiddle.net/875190we/4?

标签： css

【解决方案1】：

您必须设置宽度，将initial 替换为相对大小40px 或calc(100%)。

<body>
    <div style="width:200px;background:grey;position:relative;">hi
        <div style="position:absolute; left:100%; top:0; overflow: visible; width: calc(100%);">
            <div style="display:inline-block"><span>a</span><span style="position:relative;top:-1px; font-size:13px">x</span> 3</div>
        </div>
    </div>
</body>

（或者你可以用float: left;代替position: absolute;）

见：

How to force position absolute with 100% width to fit into parent div with padding?

【讨论】：