element form-item高度不一致导致 float:left 居右

1,918 阅读1分钟

问题

使用Layout 布局,每个项目会添加float:left属性。 而项目中原本应该居左的form-item没有流向左边。

原因

float:left不能流向左边的原因都是上一行卡位,上一行左边项目更高卡住下一行的流动。 如图左边多出1px;

继续探究是form-item__content比子元素莫名多1px导致

解决方法

设置el-form-item__content的line-height:34px,可以解决问题

父元素比子元素多1px的原因没有找到,也没有解决。 但是由于form-item_label固定高度,降低content高度则父元素form-item即被label撑开。

而设置heigh会固定高度,当content内容多行会出现问题。