Angular ng-zorro-antd nz-form-label 字数不同导致不对齐，设定统一宽度

最新推荐文章于 2024-04-25 18:26:38 发布
最新推荐文章于 2024-04-25 18:26:38 发布
阅读量3.8k 收藏
点赞数
分类专栏： 前端 表单 ng-zorro-antd 文章标签： angular ng-zorro-design 表单内
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chanchaw/article/details/95582431
版权
前端 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
ng-zorro-antd
5 篇文章 0 订阅
订阅专栏
表单
3 篇文章 0 订阅
订阅专栏

nzFormLabel 字数不同导致不对齐

  • nz-form-label 文字个数不同，即使通过 [nzSpan] 设置宽度也没有效果会出现下面的效果 - 不对齐
  • 在这里插入图片描述
  • 可以看出如果第一行的 交期 如果是4个字就会和下面的 销售类型 对齐
  • 下面介绍如何解决
  • 第一种方法：自定义类设置<nz-form-label> 的宽度
    • 在这里插入图片描述
    • 在这里插入图片描述
    • 设置后如下图
      在这里插入图片描述
  • 第二种方法：使用官方提供的类
    • 在这里插入图片描述
    • 最终也是测试通过的
chanchaw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementui form组件里的content和label横向无法对齐
qq851084545的博客
05-20 1837
element-plus官方文档的cdn加载方式，示例代码少声明了doctype，导致form组件里的content和label横向无法对齐（可能还有其他的问题）。 <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <script src="https.
如何用CSS使label标签等宽？
hzcyclone的专栏
12-06 1094
<br />label{<br />    width:5em;<br />    display:inline-block;<br />}
Angular NG-ZERRO form表单控件校验多选框
最新发布
Asr_panpan的博客
04-25 136
【代码】Angular NG-ZERRO form表单控件校验多选框。
ant design of vue 中a-form-item 的label文字内容默认右对齐，设置左对齐，在全局文件中添加
热门推荐
wwf1225的博客
10-11 2万+
ant design of vue 中a-form-item 的label文字内容默认右对齐，设置左对齐，在全局文件中添加 .ant-form-item-label { text-align: left; }
fast-crud antd修改form的label宽度
m0_45827438的博客
07-18 1134
在是否分配资源里单独配置form下的属性col，根据需求分配labelCol（label 标签布局）和wrapperCol（输入控件设置布局样式）
antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题
01-06
formLayout 不起作用 Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应: // 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 }, } --------------------------------------------------------------------------
ng-zorro-antd 入门初体验
10-17
主要介绍了ng-zorro-antd 入门初体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ng-zorro-antd-mobile：基于Ant Design Mobile和Angular的可配置Mobile UI组件。 :ant:
01-31
NG-ZORRO-Mobile 这是Ant Design Mobile规范的... $ ng new PROJECT_NAME$ cd PROJECT_NAME$ ng add ng-zorro-antd-mobile 有关@angular/cli更多信息，请@angular/cli。 您也可以使用npm或yarn安装ng-zorro-antd-mobi
angular6-ng-zorro-admin:angular6 + ng-zorro
05-14
温度 该项目是使用版本6.0.0生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 ...要获得有关Angular CLI的更多帮助，请使用ng help或查看 。
关于angular引入ng-zorro的问题浅析
10-14
`--save`参数会把ng-zorro-antd记录在package.json文件的dependencies中，这样在后续的开发环境中，ng-zorro-antd将被自动管理。 接下来，需要在项目的核心模块`app.module.ts`中导入`NgZorroAntdModule`。这一步至...
Angular,Ng-Zorro框架nz-icon静态加载第三方SVG图标示例源代码
12-03
Angular,Ng-Zorro框架nz-icon组件加载第三方SVG图标示例代码，完整工程文件夹。html图标书写格式：<i nz-icon [nzType]="'hello:computer'"></i>
ant design 表单label固定宽度
qq_42498352的博客
10-26 3438
【代码】ant design 表单label固定宽度。
label宽度随着内容自适应
qq_20176153的博客
06-05 3002
- (void)setupLabel { 2 //准备工作 3 UILabel *textLabel = [[UILabel alloc] init]; 4 textLabel.font = [UIFont systemFontOfSize:16]; 5 NSString *str = @"2222222222222222222222222222222222
html表格宽度设置相同,我如何使HTML表格的宽度与其包含的div标签相同？
weixin_39646021的博客
06-20 537
不太确定问题在这里 - 这在IE6/7和FF3中运行良好。设置.container DIV元素的宽度设置表格的宽度。向.container div添加边距不会影响表格。也许在你的标记/ CSS中还有其他影响布局的东西？/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Boxes and Tablesdiv.cont...
文本长短不一致，css让其左右两侧对齐
YaoQing222的博客
08-13 1万+
前言 许多小伙伴在写css样式的时候经常会遇到这样的一个需求，让两行长短不一的文本对齐，让其更加美观。部分小伙伴想到的就是 text-align:center; 但是出来的效果却跟理想的有差距。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
解决element中的form设置label-width后，form-item的内容和label名会产生跟label-width一样的左边距
zyxczyf123的博客
11-27 1万+
form组件中设置label-width这个属性然后配合label-position可以设置标签对齐方式。 达到以下的效果： 但是在设置之后却出现了这种情况 在form中添加这个属性inline=false就可以解决这个问题
css小技巧：表单的label在字体个数不同的时候，让字体间距相等
weixin_42652622的博客
12-19 535
html结构 <ul> <li><label>姓名</label></li> <li><label>身份证</label></li> <li><label>手机号码</label...
ant form label固定宽度_[Angular 组件库 NG-ZORRO 基础入门] Day 05 - 待办事项 + Form
weixin_39739234的博客
12-22 2823
前言回顾昨天我们开发了第一个小项目：待办事项，经过简单的操作，我们完成了待办事项的简单展示，结合实例学习了 nz-table 组件的使用方式，尽管没有涉及到全部属性，但是我们已经可以让一个 table 组件正常工作了。今天我们会继续对 待办事项（TODO）进行优化，补全 创建任务、修改任务 和 删除任务 等操作。开始之前同样地，请大家先下载 github 代码启动后打开 http://localh...
zorro table设置动态高度_angular+ng-zorro后台搜索页面
weixin_39923623的博客
11-28 973
继续上一次表格的内容，这次要在页面的头部加上一个搜索框，然后让表格的数据可以根据搜索内容更新 首先要介绍下ng-zorro的栅格化布局,以下摘自官网 在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，将整个设计建议区域按照 24 等分的原则进行划分。划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子...
angular安装ng-zorro-antd/date-picker
06-11
要在 Angular 项目中安装 ng-zorro-antd/date-picker 模块，需要按照以下步骤进行： 1. 首先，确保你的 Angular 项目已经安装了 ng-zorro-antd 包。如果没有安装，可以使用以下命令进行安装： ``` npm install ng-zorro-antd --save ``` 2. 然后，在你的 Angular 项目中，找到 app.module.ts 文件，将 NgZorroAntdModule 模块导入到该文件中： ``` import { NgZorroAntdModule } from 'ng-zorro-antd'; @NgModule({ imports: [ NgZorroAntdModule ], ... }) export class AppModule { } ``` 3. 最后，在你的组件模板中使用 <nz-date-picker> 标签来创建日期选择器。例如： ``` <nz-date-picker [(ngModel)]="selectedDate"></nz-date-picker> ``` 在组件的代码中，你可以使用 selectedDate 变量来获取用户选择的日期。 希望这些步骤可以帮助你成功安装 ng-zorro-antd/date-picker 模块。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值