el-form-item中输入框和按钮不同行的问题

项目场景：

登录表单验证码和发送验证码按钮不在同一行

使用elementUI做表单，制作登录功能，手机号下面，有验证码输入框，接着是旁边的发送验证码按钮，直接在el-form-item中写两个元素，会两行显示，又不想整个表单都是水平的。

---

问题描述

之前的代码：

输入框和按钮变成了两行，而且不能自定义行高：

<el-form-item prop="code">
   <el-input v-model="form.verfyCode" class="input" placeholder="验证码" clearable></el-input>
   <el-button class="codeBtn" @click="getCode" :disabled="codeDisable">{{codeText}}</el-button>
</el-form-item>

---

原因分析：

没仔细看，估计原因是两个都是块级元素，而且宽度也不够：

所以，给两个元素添加一个父容器元素，做弹性布局。

---

解决方案：

不需要看源码，直接添加父容器修改，输入框单独一个父容器，是因为直接修改输入框高度会无效，输入框里面有个el-input-inner把高度限定成了40：

最终源码如下：

<el-form-item prop="code">
  <div class="code">
    <div class="codeInput">
      <el-input v-model="form.verfyCode" class="input" placeholder="验证码" clearable></el-input>
    </div>
    <el-button class="codeBtn" @click="getCode" :disabled="codeDisable">{{codeText}}</el-button>
  </div>
</el-form-item>

.code{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.codeInput{
  height: 50px;
  background-color: #fff;
  width: 230px;
  line-height: 50px;
}
.codeBtn{
  height: 50px;
  margin-left: 10px;
  background-color: #f12f12;
  color: #fff;
  width: 135px;
}

最终效果：

很简单的问题，记录一下。