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

Posted

技术标签:

【中文标题】输入标签上的 Flexbox 垂直对齐问题【英文标题】:Flexbox vertical alignment issue on input tag 【发布时间】:2014-01-17 19:40:12 【问题描述】:

基本上,我有一个 label 和一个文本 input 在弹性框中相互内联,input 弯曲,align-items 设置为基线。 input 弯曲以正确填写包含 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,则对齐是正确的,但自然不再弯曲了。

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

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

【问题讨论】:

【参考方案1】:

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

【讨论】:

有没有办法使用 CSS 选择器将空占位符文本应用到所有文本输入字段? 使用 jQuery 添加占位符似乎不起作用:jsfiddle.net/wkrick/mheke9b9 无法修复 Chrome 中的对齐问题。我添加了一个红色框来说明运行 jsfiddle 后仍然存在的错位...imgur.com/a/lej2g【参考方案2】:

基本上,如果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.

【讨论】:

这似乎仍然是错误的,你有链接到你提出问题的地方吗? @slicedtoad 我不完全确定你的意思。需要详细说明吗? 你说你通知了开发人员,我认为这意味着你将错误发布在这样的地方:code.google.com/p/chromium/issues/list 或谷歌浏览器产品论坛。我想您可能只是使用了“报告问题”按钮 @slicedtoad 这是个好问题!我不确定我在哪里提出的。他们很可能是其他错误优先考虑他们。我想你可以再次向他们提出来! 这是跟踪器中的问题:code.google.com/p/chromium/issues/detail?id=401185

以上是关于输入标签上的 Flexbox 垂直对齐问题的主要内容,如果未能解决你的问题,请参考以下文章

无法使flexbox垂直对齐元素

在本机反应中,Flexbox中的文本垂直居中对齐

Inline-Flex 与垂直对齐混乱

Flex垂直对齐不起作用,只有水平对齐起作用[重复]

获取错误标签以与flex-wrap中的输入对齐

CSS Flexbox 居中对齐