问题
我们在使用 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%;
}
看效果
上面城市那个地方只需要在标签内添加 style="width: 50%"
,如图