selectでフォントサイズを変更すると、親の高さが変更されます

Question

フォントを変更するだけで親ボックスの高さが変更されます。

選択の高さは50pxです。デフォルトのフォントサイズをそのまま使用すると、親divの高さは50pxになります。

しかし、私は、フォントのサイズを変更した場合、親のdivのサイズはは50px +コンソールで見つかっていない少数のピクセルに等しく、その結果は、選択ボタンで同じ行にない

いますあなたはその問題の考えを持っていますか？ここで

<section class="central_row"> 
    <select name="name" id="list_name"> 
     <option value="an option">an option</option> 
    </select> 
    <button type="button" class="next-select"><i class="fa fa-arrow-right" aria-hidden="true"></i></button> 
</section> 



select { 
    width: 250px; 
    height: 50px; 
    border: none; 
    background: #1b997a; 
    color: white; 
    border-radius: 4px; 
    font-size: 25px; 
    margin-right: 30px; 
    padding-left: 14px; 
} 

button.next-select { 
    height: 50px; 
    width: 50px; 
    border: none; 
    margin-bottom: 0px; 
    box-sizing: border-box; 
} 

が問題とフィドルです：a little problem with the select

Answer 1

あなたの質問によると、あなたはあなたの選択ボックスの高さを更新しないことを確認します。それが正しければなぜ選択の高さコンポーネントをmax-heightに更新しようとしないのですか？ような何か：やってしなければならない何を選択

select{ 
    width: 250px; 
    max-height: 50px; 
    border: none; 
    background: #1b997a; 
    color: white; 
    border-radius: 4px; 
    font-size: 25px; 
    margin-right: 30px; 
    padding-left: 14px; 
} 

は、余白やテキストに合わせだけでなく高さを高くするinorderを、です。

それとも、このことができます。このhttps://jsfiddle.net/q4onutso/2/

希望を使用することを試みることができます。

Answer 2

だけ

select{ 
    float:left; 
} 

を追加すると、行ってもいいです。

フィドル： https://jsfiddle.net/dhavaljardosh/o5n198jL/11/