在选择中更改字体大小会更改其父级的高度答案

【问题标题】：Changing font size in select change the height of his parent在选择中更改字体大小会更改其父级的高度
【发布时间】：2017-04-18 23:44:12
【问题描述】：

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

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

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

你对问题有什么想法吗？

<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

【问题讨论】：

标签： html css select fonts height

【解决方案1】：

根据您的问题，您要确保不更新选择框的高度。如果这是正确的，为什么不尝试将选择中的高度组件更新为最大高度。比如：

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/

希望这会有所帮助。

【讨论】：

这个解决方案不起作用，即使我将父 div 的大小固定在固定位置，我也有这些额外的像素
jsfiddle.net/q4onutso 这是我更新的小提琴。你能确认这是否是你想要的吗？
不，我需要高度为 50px 的选择
@Buck 你能检查一下这个jsfiddle.net/q4onutso/1。我在理解您的用例时遇到了一些困难。你能检查一下小提琴吗？
啊...对不起.. 一个简单的垂直对齐应该可以工作 jsfiddle.net/q4onutso/2 。你能检查一下这是否是你想要的吗？

【解决方案2】：

只需添加

select{
    float:left;
}

你可以走了。

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

【讨论】：

不起作用我已经查看了这些伪元素是否可以生成填充或边距，但不是