按钮：HTML/SCSS 换行符

Question

我正在接受 Angular 培训，因此建议具备扎实的 HTML 和 SCSS 技能，但我有一个小问题。这是我的视图，有 3 个按钮，我希望前两个按钮位于同一行，最后一个按钮（紫色按钮）位于下方。我尝试过的所有方法都不起作用，那么我该怎么办呢？

这是我的 HTML：

<mat-card-actions>
      <mat-spinner *ngIf="loading$ | async; else buttons"></mat-spinner>
      <ng-template #buttons>
        <div class="action-buttons">
          <button type="button" class="btn btn-danger" (click)="onHire()">EMBAUCHER</button>
          <button type="button" class="btn btn-warning" (click)="onRefuse()">REFUSER</button>
        </div>
        <div class="back-button">
          <button mat-flat-button color="primary" (click)="onGoBack()" class="return-button">RETOUR</button>
        </div>
      </ng-template>
</mat-card-actions> 

这是我已经能够实现的 CSS：

  button {
    margin-right: 20px;
  }

.action-buttons {
  position: relative;
  margin-left: 250px;
  margin-top: 0px;
  display: block;
}

  .back-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
} 

如果您花时间帮助我，请提前致谢。

Answer 1

试试这个：

button {
margin-right: 20px;
}

.action-buttons {
position: relative;
margin-left: 250px;
margin-top: 0px;
display: block;
margin-bottom:20px;
}

.back-button {
display: block;
margin-left: auto;
margin-right: auto;
} 
.button-section{
display:flex;
flex-direction:column;
}

<mat-card-actions>
      <mat-spinner *ngIf="loading$ | async; else buttons"></mat-spinner>
      <ng-template #buttons>
      <div class="button-section">
        <div class="action-buttons">
          <button type="button" class="btn btn-danger" (click)="onHire()">EMBAUCHER</button>
          <button type="button" class="btn btn-warning" (click)="onRefuse()">REFUSER</button>
        </div>
        <div class="back-button">
          <button mat-flat-button color="primary" (click)="onGoBack()" class="return-button">RETOUR</button>
        </div>
        </div>
      </ng-template>
</mat-card-actions>