在 select 中更改字体大小会更改其父项的高度

Question

我有一个带有单独按钮的下拉列表，只改变字体就改变了父框的高度。

select的高度是50px，如果我保留默认字体大小，父div的高度是50px。

但是如果我改变字体的大小，父div的大小等于50px +控制台中找不到的几个px，结果是select和按钮是不在同一行

你对问题有什么想法吗？

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

这是一个 fiddle 问题：a little problem with the select

Answer 1

根据您的问题，您希望确保不更新 select 框的高度。如果那是正确的，为什么不尝试将 select 中的高度组件更新为最大高度。类似于：

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

select 必须做的是，为了适应边距和文本，还要增加高度。

或者你可以尝试使用这个https://jsfiddle.net/q4onutso/2/

希望对您有所帮助。

Answer 2

只需添加

select{
    float:left;
}

你很高兴。

Fiddle: https://jsfiddle.net/dhavaljardosh/o5n198jL/11/

在 select 中更改字体大小会更改其父项的高度

Changing font size in select change the height of his parent

html

css

height

fonts

select