解决不同组件的相同子组件不在同一行的问题

项目场景：

当我们前端在进行前端页面设计的时候，会发现在使用不同组件的时候，想要把其中有的相同组件放在页面的同一行上面进行展示。

---

问题描述

<el-form >
      <el-form-item >
    <el-button type="primary"
               @click="addOrUpdateHandle()">新增</el-button>
         <el-button type="success"
               @click="exp()"  >导出</el-button>   
    <el-upload
       :action="importUrl"
       :headers="tokenInfo"
       :multiple="true"  >
               <el-button type="success" >导入</el-button>
    </el-upload > 
  </el-form-item>
  </el-form> 

这样会导致前端页面的展示效果是这样的

---

原因分析：

不同组件之间会存在换行操作，我们需要认为进行配置它的格式

---

解决方案：

我们只需要在组件的父模块下加入style="vertical-align: middle;display: inline-block;"就可以实现相同子模块放在同一行的操作

 <el-form >
      <el-form-item >
    <el-button type="primary"
               @click="addOrUpdateHandle()">新增</el-button>
         <el-button type="success"
               @click="exp()"  >导出</el-button>   
    <el-upload
       :action="importUrl"
       :headers="tokenInfo"
       :multiple="true" style="vertical-align: middle;display: inline-block;" >
               <el-button type="success" >导入</el-button>
    </el-upload > 
  </el-form-item>
  </el-form>