el-form不换行
时间: 2023-10-06 21:09:34 浏览: 128
要实现 el-form 不换行,你可以使用 flex 布局或者 grid 布局来控制元素的显示方式。下面是两种方法的示例代码:
1. 使用 flex 布局:
```html
<el-form :inline="true">
<el-form-item>
<el-input placeholder="输入框1"></el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="输入框2"></el-input>
</el-form-item>
</el-form>
```
2. 使用 grid 布局:
```html
<el-form :label-position="left" :label-width="80">
<el-row>
<el-col :span="12">
<el-form-item label="输入框1">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="输入框2">
<el-input></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
```
这两种方法都可以使 el-form 的表单项水平排列,而不换行显示。你可以根据需要选择其中一种布局方式。
阅读全文