Chrome对齐项：选择和输入元素的基线

Question

我使用flex box构建了一个表单，它在Firefox，Edge和IE11中运行得非常好。

不幸的是，在Chrome中，跨度中的文字并不是一致的。如果后跟一个选择，那么它很好，但是当输入后，文本看起来与底部而不是直线对齐。

我使用基线代替中心来考虑可能不同的字体大小。

Chrome中的布局不正确

在FF中更正布局

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是因为align-items: baseline;。而是使用align-items: center;

以下是更新后的codepen

＆＃13;

＆＃13;

form,
fieldset {
  display: flex;
  flex-direction: column;
}
label {
  display: flex;
  align-items: center;
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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