el-form 一行显示并且中间有间隙
时间: 2023-09-09 10:01:50 浏览: 111
el-form 可以通过设置内联样式来实现一行显示并且中间有间隙的效果。具体的方法如下:
1. 首先,在el-form标签中,添加一个内联样式的属性值:style="display: flex;"。这会使el-form的子元素以行内样式排列。
2. 其次,为el-form中的每个el-form-item标签设置一个内联样式的属性值:style="margin-right: 10px;"。这会在每个el-form-item之间留下10像素的间隙,实现中间有间隙的效果。
完整代码如下所示:
<el-form style="display: flex;">
<el-form-item style="margin-right: 10px;">
<!-- 第一个表单项 -->
</el-form-item>
<el-form-item style="margin-right: 10px;">
<!-- 第二个表单项 -->
</el-form-item>
<el-form-item style="margin-right: 10px;">
<!-- 第三个表单项 -->
</el-form-item>
<!-- 更多表单项 -->
</el-form>
这样设置后,el-form中的每个el-form-item会水平排列,并且它们之间会有10像素的间隙。根据实际情况,可根据需要调整间隙的大小和设置的表单项数量。
阅读全文