Chrome對齊項：選擇和輸入元素的基線

Question

我已經使用彈性框構建了一個表單，並且它在Firefox，Edge和IE11中運行得非常漂亮。

不幸的是，Chrome瀏覽器中的文本並不一致。如果後面跟着一個選擇，那麼很好，但是當輸入後面的文本看起來與底部對齊而不是直線時。

我正在使用基線而不是中心來考慮可能不同的字體大小。在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;。而是使用​​

這裏是更新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>