nzForm 布局被打乱
nz-form 布局被打乱的原因
表单样式使用行内:
[nzLayout]="'inline'"
表单中使用多中类型的控件(
input
、datepicker
、select
…)会出现日期选择控件没有充满,同时 select 控件会被挤到下一行,看看下面的效果
使用官方的样式类设置统一宽度解决
-
在模板对应的
CSS
中使用下面的样式设置统一宽度/* 通过设置下面两个样式的宽度解决 nz-select 打乱 form 布局的问题*/ /* nz-form-control 外围类 */ .ant-form-item-control-wrapper{ width: 152.16px; } /* nz-form-item 样式类*/ .ant-form-item{ width: 221.2px; }
-
设置后的效果是:
-
其他解决方法
- 实际不该使用
inline
模式,而应该使用horizontal
模式,一个nz-form-item
中放置4个label
和control
- 因为一个
nz-form-item
是一行