Changer la taille de police dans select changer la hauteur de son parent

Question

J'ai une liste déroulante avec un bouton séparé, seule la modification de police a changé la hauteur de la boîte parent.

La hauteur de la sélection est 50px, si je laisse la taille de police par défaut, la hauteur de la div parent est 50px.

Mais si je change la taille de la police, la taille de la div parent est égal à 50px + quelques px ne trouve pas dans la console, le résultat est de sélectionner et le bouton ne sont pas dans la même ligne

Do vous avez une idée du problème?

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

est ici un violon avec le problème: a little problem with the select

Answer 1

Selon votre question, vous voulez vous assurer que vous ne mettez pas à jour la hauteur de votre boîte de sélection. Si cela est correct, pourquoi ne pas essayer de mettre à jour le composant height dans select à max-height. Quelque chose comme:

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

Quelle sélection doit être en train de faire est, afinde pour adapter les marges et le texte, augmenter la hauteur aussi bien.

Ou vous pouvez essayer d'utiliser cette https://jsfiddle.net/q4onutso/2/

Hope this helps.

Answer 2

Il suffit d'ajouter

select{ 
    float:left; 
} 

Et vous êtes bon d'aller.

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