Vue代码
<el-form :inline="true" class="demo-form-inline">
<el-row :gutter="20" type="flex" justify="space-between">
<el-col :span="12" style="background-color: coral;">
<el-form-item label="姓名">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="12" style="background-color: #42b983;text-align:right">
<el-form-item label="身份证号码">
<el-input></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" type="flex" justify="space-between" >
<el-col :span="12" style="background-color: coral;">
<el-form-item label="性别">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="12" style="background-color: #42b983;text-align:right" >
<el-form-item label="出生日期">
<el-input></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
页面样式:
form中 :inline="true"代表在一行显示
el-row中 :gutter="20" 代表col中的栅格间距
type="flex" justify="space-between" 组合使用, 两端对其, justify属性还有center,end,space-around
el-col 中:span="12"代表把24平分12格,占row元素的一半。