垂直对齐 mat-checkbox 和 mat-form-field | Angular Material | Angular

Question

我正在尝试将文本字段和复选框并排实现，就像这样。 但是问题在于<mat-form-field>和<mat-checkbox>没有垂直对齐。如何继续使它们垂直对齐? 下面是代码:

<mat-card>
    <mat-card-title>
        Family Information
    </mat-card-title>
    <form [formGroup]="familyInfo">
        <div fxLayout="row" fxLayoutAlign="flex-start" fxLayoutGap="40px">
            <mat-form-field fxFlex="10%">
                <mat-label>Contact Name</mat-label>
                <input matInput>
            </mat-form-field>
            <mat-form-field fxFlex="10%">
                <mat-label>Relation Type </mat-label>
                <mat-select>
                    <mat-option *ngFor="let relationType of relationTypes" [value]="relationType" color="accent">
                        {{relationType}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field fxFlex="10%">
                <mat-label>Gender </mat-label>
                <mat-select>
                    <mat-option *ngFor="let gender of genders" [value]="gender" color="accent">
                        {{gender}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field fxFlex="10%">
                <mat-label>Date Of Birth</mat-label>
                <input matInput [matDatepicker]="dateOfBirth" formControlName="dateOfBirth">
                <mat-datepicker-toggle matSuffix [for]="dateOfBirth"></mat-datepicker-toggle>
                <mat-datepicker #dateOfBirth></mat-datepicker>
            </mat-form-field>

            <mat-checkbox formControlName="isDependent">Is Dependent</mat-checkbox>

            <div fxFlex="100%"></div>
            <mat-card-actions>
                <button mat-raised-button color="primary" type="submit" class="align-right-button">
                    Save
                </button>
            </mat-card-actions>
        </div>

我尝试使用<mat-form-field>，但根据 Angular Material 文档，<mat-checkbox> 无法成为 <mat-form-field> 的一部分。

- abhigyan nayak

---

请问您能否在JSFiddle上重现这个问题并附上您的CSS代码？ - manneJan89

Answer 1

你需要手动定位复选框，没有其他方法可以排列元素。类似于对mat-checkbox使用align-self: center的方式。

请注意，mat-form-field具有一些自定义填充/边距。因此，为了完美贴合，您需要检查元素并在顶部添加几个像素。根据字体大小不同而异。

希望能帮到你。祝好运！

- Ivan Vilch

Answer 2

发现了一个解决方法，使用CSS并将mat-checkbox文本分离到自己的label标签中，并设置相对位置。

<mat-checkbox style="position:relative;top:-20px;left:15px;">
    </mat-checkbox>
    <label style="position:relative;left:27px;top:-10px;">
      some long text
    </label>

一些在主样式表中的CSS情况似乎可以工作

.mat-checkbox.mat-accent .mat-checkbox-inner-container {

边距：2像素 8像素 自动 0;

- rajquest

Answer 3

这是我处理它的方式：

<mat-checkbox class="checklist-leaf-node" style="width: 100%;" #checkBox formControlName="isDependent"> Is Dependent</mat-checkbox>
<mat-form-field style="width: 0%;">
   <input matInput class="pointer" type="text">
</mat-form-field>

- Waleed Al-Yazidi

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community