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

Question

基本上，我在flexbox中有一个label和一个文本input内联，input展开，align-items设置为基线。 input会弯曲以正确填写包含div，但label与input的底部对齐，而不是与文本基线的位置对齐。

此问题出现在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，则对齐方式是正确的，但自然它不再弯曲。

如何在不使用align-items: center之类的黑客的情况下解决此问题？

注意：我最初在另一个问题上发布了这个问题和答案，但它已被删除。我按照建议修改了它，希望它现在符合指南。

Answer 1

基本上，如果value上没有placeholder或input属性，布局引擎会将input的基线解释为{{的底部1}}，而不是文本基线的位置。

因此修改后的HTML将如下所示：

input

或

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

这是布局引擎的一个错误，并且已经通知了开发人员。 You can read more about the bug here.

Answer 2

如果您不想实际显示任何占位文字，<input type="text" placeholder=" ">添加到其他答案中效果很好。