element-ui中form表单input、select框宽度自适应

最新推荐文章于 2025-10-16 16:29:41 发布

原创最新推荐文章于 2025-10-16 16:29:41 发布 · 1.4w 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css

vue 专栏收录该内容

35 篇文章

订阅专栏

在使用Element-UI的form组件时遇到输入框和选择框对齐问题，以及宽屏下左侧留空。原因是内置样式无法自适应。解决方法是通过自定义CSS覆盖默认样式，如设置`.el-form-item`的`margin-right`为0，`.el-form-item__label`为绝对定位，`.el-form-item__content`宽度100%并添加内边距，以及设置`.el-select`和`.el-input_inner`宽度为100%。通过这种方式，可以实现多行多列的表单元素整齐排列，且在大屏幕下无空隙。

问题

我们在使用 element-ui 组件库中的 form 组件的时候，发现让每个 el-form-item 呈现多行多列的时候会显得 input、select 框参差不齐，而且当页面的宽度足够大的时候在最左边回留有空隙

在这里插入图片描述

原因

由于它的内置样式无法自适应，所以需要自己来写样式覆盖掉内置样式

解决方法

在 form 组件内的 style 标签内添加如下代码

.el-form-item {
  margin-right: 0 !important;
}
.el-form-item__label {
  position: absolute;
}
.el-form-item__content {
  width: 100%;
  padding-left: 80px;
}
.el-select,
.el-input_inner {
  width: 100%;
}