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

以下是问题的解答：a little problem with the select

Answer 1

根据您的问题，您要确保不更新选择框的高度。如果这是正确的，为什么不尝试更新select to max-height中的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;
}

选择必须做的是，为了适应边距和文本，也增加高度。

或者您可以尝试使用此https://jsfiddle.net/q4onutso/2/

希望这有帮助。

Answer 2

添加

select{
    float:left;
}

你很高兴。

小提琴： https://jsfiddle.net/dhavaljardosh/o5n198jL/11/

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

2 个答案: