输入标签上的 Flexbox 垂直对齐问题
Posted
技术标签:
【中文标题】输入标签上的 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='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 垂直对齐问题的主要内容,如果未能解决你的问题,请参考以下文章