Chrome对齐项：选择和输入元素的基线 [英] Chrome align-items: baseline for select and input elements

问题描述

不幸的是，在Chrome中，跨度中的文本没有一致地对齐。如果后面跟着一个select，那么就好了，但是当输入后面的文本看起来是对齐到底部而不是baeline的。

我使用基线而不是中心帐户可能会有不同的字体大小。

Chrome中的布局不正确 href =https://i.stack.imgur.com/jG91S.png =nofollow noreferrer>

正确的FF布局

我简化了我的代码并发布到
http://codepen.io/rachelreveley/pen/jrmbJP

form，fieldset {display：flex; flex-direction：column;} label {display：flex;对齐项目：基线; flex-direction：row; justify-content：flex-start;填充：.3rem 0; flex-wrap：wrap;} fieldset span {text-align：right; padding：0 1rem 0 0;} input，select，textarea {padding：.5rem;}

 <形式> <字段集> <标签> <跨度>标签和LT; /跨度> < input type =text/> < /标签> <标签> <跨度>标签和LT; /跨度> <选择> < option value =selected =disabled =>< / option> < option value =Mr> Mr< / option> < option value =Dr> Dr< / option> < option value =Miss> Miss< / option> < option value =Mrs> Mrs< / option> < option value =Ms> Ms< / option> < option value =Ms> Mx< / option> < option value =其他>其他< / option> < /选择> < /标签> < / fieldset>< / form>  

您需要在输入中添加 placeholder =，它们将完美对齐。

I have built a form using flex box and it works beautifully in Firefox, Edge and IE11.

Unfortunately in Chrome the text in the spans isn't aligning consistently. It is fine if followed by a select but when followed by an input the text appears to align to the bottom rather than the baeline.

I am using baseline instead of center to account for potentially different font sizes.

Incorrect layout in Chrome

Correct layout in FF

I have simplified my code and posted to http://codepen.io/rachelreveley/pen/jrmbJP

form,
fieldset {
  display: flex;
  flex-direction: column;
}
label {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  justify-content: flex-start;
  padding: .3rem 0;
  flex-wrap: wrap;
}
fieldset span {
  text-align: right;
  padding: 0 1rem 0 0;
}
input,
select,
textarea {
  padding: .5rem;
}

<form>
  <fieldset>
    <label>
      <span>Label</span>
      <input type="text" />
    </label>
    <label>
      <span>Label</span>
      <select>
        <option value="" selected="" disabled=""></option>
        <option value="Mr">Mr</option>
        <option value="Dr">Dr</option>
        <option value="Miss">Miss</option>
        <option value="Mrs">Mrs</option>
        <option value="Ms">Ms</option>
        <option value="Ms">Mx</option>
        <option value="Other">Other</option>
      </select>
    </label>
  </fieldset>
</form>

解决方案

You need to add placeholder=" " to your inputs and they will align perfectly.

这篇关于Chrome对齐项：选择和输入元素的基线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！