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

Posted 2023-03-05

【中文标题】输入标签上的 Flexbox 垂直对齐问题

【英文标题】：Flexbox vertical alignment issue on input tag

【发布时间】：2014-01-17 19:40:12

【问题描述】：

基本上，我有一个 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 之类的 hack 的情况下解决此问题？

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

【参考方案1】：

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

【讨论】：

有没有办法使用 CSS 选择器将空占位符文本应用到所有文本输入字段？

使用 jQuery 添加占位符似乎不起作用：jsfiddle.net/wkrick/mheke9b9

无法修复 Chrome 中的对齐问题。我添加了一个红色框来说明运行 jsfiddle 后仍然存在的错位...imgur.com/a/lej2g

【参考方案2】：

基本上，如果input 上不存在value 或placeholder 属性，布局引擎会将input 的基线解释为input 的底部，而不是文本基线应位于的位置是。

所以修改后的 HTML 如下所示：

<div>
  <label>Email:</label>
  <input type='text' value='[e-mail]' />
</div>

或

<div>
  <label>Email:</label>
  <input type='text' placeholder='[e-mail]' />
</div>

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

【讨论】：

这似乎仍然是错误的，你有链接到你提出问题的地方吗？

@slicedtoad 我不完全确定你的意思。需要详细说明吗？

你说你通知了开发人员，我认为这意味着你将错误发布在这样的地方：code.google.com/p/chromium/issues/list 或谷歌浏览器产品论坛。我想您可能只是使用了“报告问题”按钮

@slicedtoad 这是个好问题！我不确定我在哪里提出的。他们很可能是其他错误优先考虑他们。我想你可以再次向他们提出来！

这是跟踪器中的问题：code.google.com/p/chromium/issues/detail?id=401185