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

Question

基本上,我有一个label与文本input内嵌在Flexbox的彼此,与input弯曲,align-items设置为基线.该input挠曲填写含有div正常,但label用的底部对齐input,而不是在文本基线应该的.

此问题出现在Chrome和其他WebKit浏览器中.

这是代码.您可以查看它在此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,对齐是正确的,但自然它不再弯曲.

如何在不使用hack的情况下解决这个问题align-items: center？

注意:我最初在一个不同的问题上发布了这个问题并回答了它并被删除了.我按照建议修改了它,希望它现在符合指南.

Answer 1

基本上,如果没有value或placeholder属性input,布局引擎会将基线解释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的信息