材质卡片操作按钮左右延伸超出卡片内容边界

Question

在this Angular 10.2 Material sample 中，左右操作按钮到达card-content 之外：

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

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

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

接受 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;
}

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

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

1. 重置mat-card-actions边距：

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

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

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

Answer 2

你的问题的答案

为什么绿色填充超出橙色边距。如果绿色 padding == 橙色边距按钮应该正确对齐，没有 解决方法

在此组件的 css 文件中。图片上是 mat-card-action 的默认配置

Answer 3

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

  <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">...

---

为什么！？
我没有使用材料的经验，但我在使用引导程序时遇到了同样的问题 .. 这是因为外部布局类/元素 - 在引导的情况下 - 'row' - 可能会应用这样的边距：

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

和内部类/元素 - 'col-md-6' 在引导的情况下 - 应用这样的填充

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