Angular Material：如何将复选框与表单其他控件左对齐？

是否符合Material Design规范？ #

Material Design体系中，mat-form-field组件默认带有左内边距，而mat-checkbox作为独立控件，原生没有这个内边距，所以两者默认不对齐是组件的原生表现，并不违反设计规范。不过从视觉一致性角度，登录表单里让所有控件左对齐会更美观，所以通常会手动调整。

实现左对齐的几种方法 #

1. 自定义类匹配内边距 #

先查看你当前Angular Material版本中mat-form-field的默认左内边距（一般为1px，不同版本可能略有差异），给复选框添加自定义类来匹配该内边距：

组件CSS代码：

.align-checkbox {
  padding-left: 1px; /* 与mat-form-field的左内边距保持一致 */
}

模板修改：

<mat-checkbox formControlName="rememberMe" class="align-checkbox">Remember me</mat-checkbox>

2. 用Flex布局统一控制 #

给外层mat-card设置Flex布局，同时统一控件的内边距：

组件CSS代码：

.custom {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 调整控件间的间距 */
}

.custom mat-checkbox {
  padding-left: 1px; /* 匹配输入框的左内边距 */
}

3. 全局样式调整（慎用） #

如果需要所有页面的mat-checkbox都和输入框对齐，可以在全局样式文件（比如styles.scss）中添加：

mat-checkbox {
  padding-left: 1px;
}

注意：这种方式会影响所有mat-checkbox，仅适合全局统一需求的场景。

另外，你模板里的mat-checkbox上多写了matInput属性，这个是给输入框用的指令，复选框不需要，记得删掉。

内容的提问来源于stack exchange，提问作者Martin Staufcik