Taste ist niedriger als andere Elemente Form

Question

Ich möchte nur wissen, warum meine Schaltfläche Tag ist niedriger als select Tag?

Das ist mein HTML ist:

<div class="wrap-form-planning"> 
    <form class="form_search_order form-planning" name="form_search_client"> 

     <!-- Chauffeur --> 
     <select type="search" name="chauffeur_name[]" class="select-chauffeur selectpicker" multiple size="2"> 
      <option value="" selected>Nom du chauffeur</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
     </select> 

     <!-- Client --> 
     <select type="search" name="client_name[]" class="select-client" multiple size="2"> 
      <option value="" selected>Nom du client</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 

     <!-- Semaine --> 
     <select name="semaine[]" id="semaine" class="select-semaine" multiple size="2"> 
      <option value="" selected>Semaine</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
     </select> 

     <button type="submit" class="inp-submit-form-planning"><i class="fa fa-search"></i></button> 
    </form> 
</div> 

Meine CSS:

.wrap-form-planning{ 
    display: block; 
    background-color: $bleu; 
    padding: 20px 0; 
    text-align: center; 
} 

.form-planning{ 
    width:80%; 
    max-width: 1080px; 
    margin: auto; 
    margin-right: 10px; 

    select{ 
    font-size: 14px; 
    margin-right: 10px; 
    width: (14%-10px); 
    border-radius: 0; 

    &.select-chauffeur{ 
     min-width: 150px; 
    } 

    &.select-client{ 
     min-width: 120px; 
    } 

    &.select-semaine{ 
     min-width: 90px; 
     margin-right: 0; 
    } 
    } 

.inp-submit-form-planning{ 
    font-size: 14px; 
    color: white; 
    background: $bleu; 
    border: solid 2px white; 
    padding: 4px 9px; 

    &:hover{ 
    color: $bleu; 
    background: white; 
    cursor: pointer; 
    transition: 0.6s; 
    } 
} 

}

hier ein Bildschirm ist:

Answer 1

Sie unterschiedlich große inline-block Elemente sind, so werden sie ausgerichtet baseline standardmäßig. Sie haben auch einen 2px weißen Rahmen auf dem Suchsymbol

Sie können form.form_search_order > * { vertical-align: middle; } was auch immer vertical-align Eigenschaft Sie wollen.

Aber ich würde ein Flex-Layout verwenden. Fügen Sie dem Formular display: flex hinzu, und verwenden Sie align-items, um sie vertikal auszurichten, wie Sie möchten. Außerdem wurde justify-content: center hinzugefügt, um sie horizontal zu zentrieren, da Sie ursprünglich text-align: center auf dem ursprünglichen Element hatten.

body { 
 
    background: blue; 
 
} 
 

 
.wrap-form-planning { 
 
    display: block; 
 
    padding: 20px 0; 
 
    text-align: center; 
 
} 
 

 
.form-planning { 
 
    width: 80%; 
 
    max-width: 1080px; 
 
    margin: auto; 
 
    margin-right: 10px; 
 
} 
 
.form-planning select { 
 
    font-size: 14px; 
 
    margin-right: 10px; 
 
    width: calc(14% - 10px); 
 
    border-radius: 0; 
 
} 
 
.form-planning select.select-chauffeur { 
 
    min-width: 150px; 
 
} 
 
.form-planning select.select-client { 
 
    min-width: 120px; 
 
} 
 
.form-planning select.select-semaine { 
 
    min-width: 90px; 
 
    margin-right: 0; 
 
} 
 
.form-planning .inp-submit-form-planning { 
 
    font-size: 14px; 
 
    color: white; 
 
    border: solid 2px white; 
 
    padding: 4px 9px; 
 
} 
 
.form-planning .inp-submit-form-planning:hover { 
 
    background: white; 
 
    cursor: pointer; 
 
    transition: 0.6s; 
 
} 
 

 
form.form_search_order { 
 
    display: flex; 
 
    align-items: flex-end; 
 
    justify-content: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="wrap-form-planning"> 
 
    <form class="form_search_order form-planning" name="form_search_client"> 
 

 
     <!-- Chauffeur --> 
 
     <select type="search" name="chauffeur_name[]" class="select-chauffeur selectpicker" multiple size="2"> 
 
      <option value="" selected>Nom du chauffeur</option> 
 
       <option value="1">1</option> 
 
       <option value="2">2</option> 
 
     </select> 
 

 
     <!-- Client --> 
 
     <select type="search" name="client_name[]" class="select-client" multiple size="2"> 
 
      <option value="" selected>Nom du client</option> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
     </select> 
 

 
     <!-- Semaine --> 
 
     <select name="semaine[]" id="semaine" class="select-semaine" multiple size="2"> 
 
      <option value="" selected>Semaine</option> 
 
       <option value="1">1</option> 
 
       <option value="2">2</option> 
 
     </select> 
 

 
     <button type="submit" class="inp-submit-form-planning"><i class="fa fa-search"></i></button> 
 
    </form> 
 
</div>