如何解决调整 mat-form-field 浮动标签间隙
如下图所示,在第二张图片上:
右侧有一个更大的间隙,浮动标签和边框之间。我想调整一下,使两边的间隙均匀。
目前为止浮动标签的样式:
mat-form-field span.mat-form-field-label-wrapper label {
color: white;
opacity: 0.5;
}
.mat-form-field-label-wrapper {
transform: translate(1.3em,-0.3rem);
}
.mat-form-field.mat-focused .mat-form-field-label {
font-size: 0.75rem;
color: white;
opacity: 1;
}
我尝试使用 margin-right 并向右平移,但似乎没有任何效果……这种差距仍然存在。
有什么办法可以做到这一点吗?
提前致谢。
解决方法
您要调整的元素是类 div
的 mat-form-field-outline-gap
。问题在于它具有基于标签文本动态生成的静态宽度。
解决此问题的一种方法是为 mat-form-field-outline-gap
类设置负边距:
.mat-form-field-outline-gap {
margin-right: -6px;
}
https://stackblitz.com/angular/lmgyydoebpro?file=src%2Fstyles.scss
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。