输入标签上的Flexbox垂直对齐问题
输入标签上的Flexbox垂直对齐问题
提问于 2013-12-30 21:13:46
基本上，我在一个柔性盒中有一个label和一个文本input相互内联，而input弯曲，align-items设置为基线。input灵活地填写包含的div，但是label与input的底部对齐，而不是文本基线的位置。
这个问题出现在Chrome浏览器中，也可能出现在其他WebKit浏览器中。
这是密码。您可以查看它在这个代码中是如何呈现的。
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，对齐方式是正确的，但它自然不再是弯曲的。
我如何在不使用像align-items: center这样的黑客的情况下修复这个问题？
注:我最初把这个问题和答案放在一个不同的问题上，然后被删除了。我已经按照建议修改了它，并希望它现在符合指导方针。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-12-30 21:13:46
基本上，在不存在value或placeholder属性的情况下，布局引擎将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>这是布局引擎的一个bug，devs已经收到通知。你可以在这里读到更多关于这个bug的信息。
Stack Overflow用户
发布于 2015-07-26 23:25:11
添加到其他答案中，如果您不想实际显示任何占位符文本，<input type="text" placeholder=" ">工作得很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20847687
复制相关文章
相似问题
腾讯云开发者
