gpt4 book ai didi

css - 为什么 inline-block 位置是 :relative ignoring top offset in percentage?

转载 作者:行者123 更新时间:2023-11-28 05:49:57 25 4
gpt4 key购买 nike

我一直在试图弄清楚为什么如果我按照下面的结构相对定位内联 block 选择元素,它会忽略百分比的顶部偏移属性(例如,在 ems 中,没问题)。没有 p 标签,偏移量 % 有效。但是一旦 p 标签重新出现,top % 就不起作用了。谢谢。

html, body {
height: 100%;
}
select {
position: relative;
top: 10%;
}
<body>
<p>some text</p>
<select>
<option>apples</option>
</select>
<p>some text</p>
</body>

最佳答案

似乎 top: 10%inline-block

  • 在 Firefox 上工作
  • 在 Chrome 上被忽略
  • 在 IE 上,百分比会在页面加载时解析,但调整窗口大小不会更新它。

我认为 top 百分比和 display: inline-block 应该没有任何问题。百分比应该能够根据包含 block 的高度正确解析(与边距不同,top 只设置一个偏移量,它不影响祖先,所以没有循环定义)。 containing block不取决于它是 block 级还是内联级,因此没有理由说一个应该工作而另一个不工作。

作为解决方法,您可以将 select 包装在 block 元素内,或将其设置为 block 样式:

html, body {
height: 100%;
}
select {
position: relative;
top: 10%;
display: block;
}
<p>some text</p>
<select>
<option>apples</option>
</select>
<p>some text</p>

关于css - 为什么 inline-block 位置是 :relative ignoring top offset in percentage?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37397922/

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