Chromeのalign-items：選択要素と入力要素のベースライン

Question

フレックスボックスを使用してフォームを作成しました。これはFirefox、Edge、IE11で美しく機能します。

残念ながら、Chromeでは残念ながらスパンのテキストが一貫して整列していません。それに続く選択があっても問題ありませんが、入力が続いた場合、テキストは、ベーラインではなくボトムに揃うように見えます。

私は、センターの代わりにベースラインを使用して、潜在的に異なるフォントサイズを考慮しています。私は私のコードを簡素化し、 http://codepen.io/rachelreveley/pen/jrmbJP

に投稿しているクロームで

不正なレイアウト

FF

で正しいレイアウト

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>