Html 按钮低于其他元素的形式

我只是想知道为什么我的按钮标签低于

select

tag

这是我的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>

}

这是一个屏幕：

---

它们是不同大小的

内联块

元素，因此默认情况下它们将对齐

基线

。搜索图标上还有一个2倍的白色边框

您可以使用

form.form\u search\u order>*{vertical align:middle；}

所需的任何

vertical align

属性

但我会使用flex布局。将

display:flex

添加到表单中，然后使用

align items

以您想要的方式垂直对齐项目。还添加了

justify content:center

以使其水平居中，因为您最初在父对象上有

text align:center

正文{
背景：蓝色；
}
.包装表单规划{
显示：块；
填充：20px0；
文本对齐：居中；
}
.表格设计{
宽度：80%；
最大宽度：1080px；
保证金：自动；
右边距：10px；
}
.表格规划选择{
字体大小：14px；
右边距：10px；
宽度：钙（14%-10px）；
边界半径：0；
}
.表格计划选择.选择司机{
最小宽度：150px；
}
.form planning select.select-client{
最小宽度：120px；
}
.form planning select.select-semaine{
最小宽度：90px；
右边距：0；
}
.表格计划。inp提交表格计划{
字体大小：14px；
颜色：白色；
边框：纯色2px白色；
填充：4px9px；
}
.form planning.inp提交表单计划：悬停{
背景：白色；
光标：指针；
过渡：0.6s；
}
form.form\u搜索\u顺序{
显示器：flex；
对齐项目：柔性端；
证明内容：中心；
}

司机姓名
1.
2.
客户名称
1.
2.
塞曼
1.
2.

它们是不同大小的

内联块

元素，因此默认情况下它们将对齐

基线

。搜索图标上还有一个2倍的白色边框

您可以使用

form.form\u search\u order>*{vertical align:middle；}

所需的任何

vertical align

属性

但我会使用flex布局。将

display:flex

添加到表单中，然后使用

align items

以您想要的方式垂直对齐项目。还添加了

justify content:center

以使其水平居中，因为您最初在父对象上有

text align:center

正文{
背景：蓝色；
}
.包装表单规划{
显示：块；
填充：20px0；
文本对齐：居中；
}
.表格设计{
宽度：80%；
最大宽度：1080px；
保证金：自动；
右边距：10px；
}
.表格规划选择{
字体大小：14px；
右边距：10px；
宽度：钙（14%-10px）；
边界半径：0；
}
.表格计划选择.选择司机{
最小宽度：150px；
}
.form planning select.select-client{
最小宽度：120px；
}
.form planning select.select-semaine{
最小宽度：90px；
右边距：0；
}
.表格计划。inp提交表格计划{
字体大小：14px；
颜色：白色；
边框：纯色2px白色；
填充：4px9px；
}
.form planning.inp提交表单计划：悬停{
背景：白色；
光标：指针；
过渡：0.6s；
}
form.form\u搜索\u顺序{
显示器：flex；
对齐项目：柔性端；
证明内容：中心；
}

司机姓名
1.
2.
客户名称
1.
2.
塞曼
1.
2.

它正在工作！谢谢对于

display:flex

，这是不可能的，因为我在

表单计划之后有一个其他表单，这两个表单必须是inline@Emilien
display:inlineflex
也是一件事。同样的事情，但使它成为一个内联元素。它的工作！谢谢对于
display:flex
，这是不可能的，因为我在
表单计划之后有一个其他表单，这两个表单必须是inline@Emilien
display:inlineflex
也是一件事。同样的事情，但使它成为一个内联元素。
.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;
  }
}