Material 卡片操作按钮向左和向右延伸超出卡片内容边界

Question

在 this Angular 10.2 Material sample 中，左右操作按钮超出了 card-content:

“创建帐户”按钮的右边缘应与字段的右边缘对齐；同样，“登录”按钮的左边缘应与字段的左边缘对齐。

图中绿色为padding区域；橙色是边距；并且，蓝色是行动区。为什么蓝色和绿色与橙色不对齐？

HTML是：

<mat-card class="signup-card">
  <mat-card-header>
    <mat-card-title>The title</mat-card-title>
    <mat-card-subtitle>The longer explanatory sub-title.</mat-card-subtitle>
  </mat-card-header>

  <mat-card-content>
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div fxLayout="column">
        <div fxLayout="row" fxLayoutGap="10px">
          <mat-form-field>
            <mat-label>First name</mat-label>
            <input matInput formControlName="firstName">
          </mat-form-field>
          <mat-form-field>
            <mat-label>Last name</mat-label>
            <input matInput formControlName="lastName">
          </mat-form-field>
        </div>
        <mat-form-field>
          <mat-label>Email</mat-label>
          <input matInput formControlName="email" required>
          <mat-error *ngIf="email.errors?.required">Email is required</mat-error>
          <mat-error *ngIf="email.errors?.email">Not a valid email</mat-error>
        </mat-form-field>
        <div fxLayout="row" fxLayoutGap="10px">
          <mat-form-field>
            <mat-label>Password</mat-label>
            <input matInput type="password" formControlName="password" required>
            <mat-error *ngIf="password.errors?.required">Password is required</mat-error>
            <mat-error *ngIf="password.errors?.minlength">Password is too short</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label>Confirm</mat-label>
            <input matInput type="password" formControlName="passwordConfirm" required>
            <mat-error *ngIf="passwordConfirm.errors?.required">Confirm password is required</mat-error>
            <mat-error *ngIf="passwordConfirm.errors?.mustMatch">Password and confirm must match</mat-error>
          </mat-form-field>
        </div>
      </div>
      <mat-card-actions >
        <button mat-button routerLink='/signin' routerLinkActive="active" type="button">Sign in</button>
        <div fxFlex></div>
        <button mat-flat-button routerLink='/signup' routerLinkActive="active" type="submit" color="primary">Create account</button>
      </mat-card-actions>
    </form>
  </mat-card-content>

  <mat-card-footer>
    The footer containing final parting thoughts...
  </mat-card-footer>

</mat-card>

和 CSS:

.mat-card-header {
  text-align: center;
  justify-content: center;
}

.signup-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

我想要的对齐方式似乎应该是默认行为，所以我一定是做错了什么……有什么想法吗？

Answer 1

如果你移动这个块，它可能会解决

  <mat-card-actions >
        <button mat-button routerLink='/signin' routerLinkActive="active" type="button">Sign in</button>
        <div fxFlex></div>
        <button mat-flat-button routerLink='/signup' routerLinkActive="active" type="submit" color="primary">Create account</button>
  </mat-card-actions>

在 <div fxLayout="column">...

里面

为什么！？
我没有使用 material 的经验，但我在使用 bootstrap 时遇到了同样的问题.. 这是因为在 bootstrap 的情况下，外部布局 class/element -'row'- 可能应用这样的边距：

margin-right: -15px;
margin-left: -15px;

和内部 class/element - 'col-md-6' 在 bootstrap 的情况下 - 应用这样的填充

padding-right: -15px;
padding-left: -15px;

Answer 2

您问题的答案：

why the green padding extends beyond the orange margin. If the green padding == orange margin the buttons should align correctly without a work-around

位于此组件的 CSS 文件中。图像上是 mat-card-action 的默认配置

Answer 3

接受 Tomasz 的回答并在此处添加更多详细信息。默认Angular Material Card padding is:

@mat-card-padding: 16px !default;

和 mat-card-actions margins 是：

.mat-card-actions {
  @extend %mat-card-section-base;
  margin-left: -$mat-card-padding / 2;
  margin-right: -$mat-card-padding / 2;
  padding: 8px 0;
}

这就是按钮边缘与字段不对齐的原因。

要将卡片操作中的按钮边缘与卡片内容中的字段边缘对齐，您可以：

重置 mat-card-actions 页边距：

<mat-card-actions style="margin-left: 0; margin-right: 0;">

向 mat-card-actions 添加填充（正如 Tomasz 在评论中建议的那样）：

<mat-card-actions style="padding: 8px;">

Material 卡片操作按钮向左和向右延伸超出卡片内容边界

Material card action buttons extend left & right beyond card content boundary

css

angular

angular-material

angular-flex-layout