gpt4 book ai didi

css - 输入标签上的 Flexbox 垂直对齐问题

转载 作者:技术小花猫 更新时间:2023-10-29 11:52:12 25 4
gpt4 key购买 nike

基本上,我有一个 label 和一个文本 input 在 flexbox 中相互内联,input flexing,对齐元素 设置为基线。 input flex 以正确填充包含的 div,但 labelinput 的底部对齐文本基线的位置。

这个问题本身出现在 Chrome 中,也可能出现在其他 WebKit 浏览器中。

这是代码。 You can check out how it renders in this Codepen.

HTML:

<div>
<label>Email:</label>
<input type='text' />
</div>

CSS:

div{
width:20rem;
background:#999;
padding:.5rem;

display:flex;
align-items:baseline;
}

input{
flex:1;
}

如果注释掉display: flex,对齐是正确的,但自然就不再是flexing了。

如果不使用像 align-items: center 这样的 hack,我该如何解决这个问题?

注意:我最初在另一个问题中发布了这个问题和答案,它被删除了。我已经按照建议对其进行了修改,希望它现在符合指南。

最佳答案

基本上,如果 input 上没有 valueplaceholder 属性,布局引擎会解释 的基线input 作为 input 的底部,而不是文本基线应该在的位置。

所以修改后的 HTML 看起来像:

<div>
<label>Email:</label>
<input type='text' value='example@gmail.com' />
</div>

<div>
<label>Email:</label>
<input type='text' placeholder='example@gmail.com' />
</div>

这是布局引擎的错误,开发人员已收到通知。 You can read more about the bug here.

关于css - 输入标签上的 Flexbox 垂直对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20847687/

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