铬对齐-项目:选择和输入元素的基线

Question

我使用flex构建了一个表单，它在Firefox、Edge和IE11中工作得很好。

不幸的是，在Chrome中，跨度中的文本并不是一致的。如果后面跟着一个select，这是很好的，但是当后面跟着一个输入时，文本看起来是对齐的底部，而不是基线。

我使用基线而不是中心来解释可能不同的字体大小。

在Chrome中的不正确布局

​

​

在FF中的正确布局

​

​

我简化了我的代码并将其发布到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>

​

Answer 1

您需要将placeholder=" "添加到您的输入中，它们将完美地对齐。

Answer 2

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

下面是更新的码页

​

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

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

​