当垂直方向空间受限且表单较简单时，可以在一行内放置表单。 通过设置 inline 属性为 true 可以让表单域变为行内的表单域。 **真的非常简单，直接:inline="true"就搞定了。官方例子如下：** ``` <template> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="Approved by"> <el-input v-model="formInline.user" placeholder="Approved by" /> </el-form-item> <el-form-item label="Activity zone"> <el-select v-model="formInline.region" placeholder="Activity zone"> <el-option label="Zone one" value="shanghai" /> <el-option label="Zone two" value="beijing" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">Query</el-button> </el-form-item> </el-form> </template> <script lang="ts" setup> import { reactive } from 'vue' const formInline = reactive({ user: '', region: '', }) const onSubmit = () => { console.log('submit!') } </script> ``` **写4个输入框效果更明显一点** ``` <el-form ref="formRef" :inline="true" label-width="80px" :model="form" :rules="rules" class="demo-form-inline" > <el-form-item label="宗地位置" prop="landName"> <el-input v-model.trim="form.landName" /> </el-form-item> <el-form-item label="地块位置" prop="areaposition"> <el-input v-model.trim="form.areaposition" /> </el-form-item> <el-form-item label="控规编号" prop="kgnumber"> <el-input v-model.trim="form.kgnumber" /> </el-form-item> <el-form-item label="土地面积" prop="landarea"> <el-input v-model.trim="form.landarea" /> </el-form-item> </el-form> ``` 效果如下，本来4个输入框是垂直排列的，现在可以横着排列了，而且一行排列多少个它应该是根据宽度自适应的，