按钮低于其他元素形式

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元素，因此默认情况下它们会对齐baseline。您还可以在搜索图标上添加2px白色边框

您可以使用form.form_search_order > * { vertical-align: middle; }所需的vertical-align属性。

但我会使用flex布局。将display: flex添加到表单中，然后使用align-items将它们垂直对齐，无论您想要什么。还添加了justify-content: center以横向居中，因为您最初在父级上有text-align: 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>