Angular带输入框的mat-checkbox布局对齐问题如何通过CSS解决？

出现间距不一致的核心原因是mat-form-field（Angular Material输入框组件）自带默认上下边距和填充，你直接把它放在mat-checkbox的内容插槽内时，会撑大当前列表项的高度，和其他仅展示文本的复选框列表项的高度不匹配，最终表现为间距过大。CSS完全可以解决该问题，以下是两种可行方案：

首先添加对应样式代码：

/* 统一所有列表项的对齐方式和间距 */
ul li {
  display: flex;
  align-items: center;
  margin: 6px 0; /* 可根据设计调整具体数值，保持所有项上下间距一致 */
  list-style: none;
}

/* 给「其他」选项的输入框加自定义类，覆盖默认边距 */
.custom-other-input {
  margin: 0 !important;
  width: 180px; /* 自定义输入框宽度 */
  margin-left: 8px; /* 和前面的复选框保持合适的横向间距 */
}

/* 若需要调整输入框高度和普通文本对齐，加以下样式 */
::ng-deep .custom-other-input .mat-form-field-flex {
  padding: 3px 8px !important;
}

/* 统一普通选项的文本行高，和复选框高度匹配 */
.deal-text-label {
  line-height: 24px;
}

之后修改HTML代码，给mat-form-field添加自定义类即可：

<mat-form-field
  appearance="fill"
  class="custom-other-input"
  *ngIf="contigency.text === 'Other Contingencies'; else text"
>
<!-- 其余输入框代码保持不变 -->

把输入框从mat-checkbox的内容插槽移到同级位置，避免mat-checkbox的默认样式影响输入框排版，修改后的HTML如下：

<ul>
  <li *ngFor="let contigency of contingencies;let i = index;">
    <mat-checkbox
      class="checkbox-margin"
      name="contigency"
      color="primary"
      [checked]="currentSelectedContingency(contigency)"
      (change)="changeCurrentContingencies($event,contigency)"
      #checkbox
    >
      <ng-template #text>
        <div class="deal-text-label">{{contigency.text}}</div>
      </ng-template>
    </mat-checkbox>
    <!-- 输入框移到mat-checkbox外 -->
    <mat-form-field
      appearance="fill"
      class="custom-other-input"
      *ngIf="contigency.text === 'Other Contingencies'"
    >
      <input
        [disabled]="!checkbox.checked"
        name="otherContingency"
        matInput
        [(ngModel)]="dealDispositionFormFields.otherContingency"
      />
      <span matPrefix *ngIf="dealDispositionFormFields.otherContingency">$</span>
    </mat-form-field>
  </li>
</ul>

这种结构下flex布局的对齐效果更稳定，不容易出现样式冲突。

注意事项 #

如果在组件的样式文件中修改mat-form-field样式不生效，是因为Angular组件样式封装的限制，你可以把相关样式写到全局的styles.css文件中，或者使用::ng-deep前缀临时穿透样式封装即可。

内容的提问来源于stack exchange，提问作者Mr Durk