gpt4 book ai didi

css - 绝对定位时,内联 block 的大小不适合其子项

转载 作者:行者123 更新时间:2023-11-28 08:56:18 25 4
gpt4 key购买 nike

这是我的问题的一个 fiddle :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 INSIDE 放置在一个绝对定位的元素中时,它不再适合它的子元素。

最佳答案

您必须设置宽度,将initial替换为相对大小40pxcalc(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;)

参见:

关于css - 绝对定位时,内联 block 的大小不适合其子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30883593/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com