转载

nz-form inline 模式下多类型控件打乱布局的问题

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 是一行

原文 https://segmentfault.com/a/1190000019742206

正文到此结束

所属分类：编程技术 Java

本文标签： App CSS id UI ORM http https src 解决方法 Select
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

nz-form inline 模式下多类型控件打乱布局的问题

nzForm 布局被打乱

nz-form 布局被打乱的原因

使用官方的样式类设置统一宽度解决

其他解决方法

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流