ボタンが他の要素フォームよりも低い

Question

私のボタンタグがselectタグよりも低い理由を知りたいのですが？

これは私のHTMLです：

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

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

}

ここでは、画面です：

Answer 1

彼らは、異なるサイズのinline-block要素です、彼らは整列しますのでデフォルトではです。検索アイコンに2pxの白い枠線が表示されます

form.form_search_order > * { vertical-align: middle; }何でもvertical-alignプロパティを使用できます。

私はフレックスレイアウトを使用します。 display: flexをフォームに追加し、align-itemsを使用して、縦に並べます。もともと親にtext-align: centerがあったので、水平方向に中央に配置するためにjustify-content: centerが追加されました。

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>