Chrome align-items: baseline for select and input elements

问题

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>

回答1:

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

回答2:

It's because of align-items: baseline;. Instead use align-items: center;

Here is the updated codepen

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>

来源：https://stackoverflow.com/questions/39700227/chrome-align-items-baseline-for-select-and-input-elements

标签

html

css

forms

google-chrome

flexbox