element form inline 问题

element form inline属性bug

element-ui 中 form 中 设置 inline 属性为 true 后会出现因设备分辨率改变，form 换行的bug

原因分析

图例

![示例图]( https://img-blog.csdnimg.cn/2021063014322526.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTk1NzMz,size_16,color_FFFFFF,t_70)

element demo
input style
![input style]( https://img-blog.csdnimg.cn/20210630143149806.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTk1NzMz,size_16,color_FFFFFF,t_70)

总结

出现 form 换行原因是由于：
inline 属性给 form 设置了width：auto的样式，
这会导致form按百分比缩放
同时 form中 input 组件样式中存在 width：100%的设定
这使得 input width  会自动与外层的div width 保持一致
posted @ 2021-06-30 14:41  AUSER  阅读(1745)  评论(0)    收藏  举报