gpt4 book ai didi

html - Inline-Block 内部位置 :absolute element

转载 作者:太空狗 更新时间:2023-10-29 12:29:22 28 4
gpt4 key购买 nike

我的问题很简单:绝对定位元素内的行内 block 元素会发生什么?我有一个小例子来说明我的意思。否则很难解释。问题是为什么.tag里面的.icon没有像之前的.icon那样定位(也就是inline 和文字的右边)

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

最佳答案

实际上,图标的作用完全一样。要进行测试,请尝试将 a 的样式设置为

display: inline-block; width: 50px;

当您设置标签 position: absolute 时,它​​会导致标签不再具有其父级 100% 的自动宽度,而是根据浏览器内的试探法(取决于浏览器)具有它可以采用的最小宽度).内联 block 就像“内联”一样,就像图像一样,因此会在第一次机会时换行到下一行(就在“标签”一词之后)。

所以简短的回答是:图标表现相同,但包含它的 block 不同。

为了强制图标在同一行,如在第一行,您可以添加white-space: pre;。请参阅:http://jsbin.com/itole4/6 (另请参阅下面的评论)

关于html - Inline-Block 内部位置 :absolute element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5606323/

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