如何使用 Angular 在 HTML 中移动元素答案

【问题标题】：How to move elements in HTML with Angular如何使用 Angular 在 HTML 中移动元素
【发布时间】：2019-06-27 01:38:51
【问题描述】：

我有一个简单的页面，如下所示：

如您所见，那里有 3 个<button> 元素，但我想将取消按钮移动到页面右侧，如图中的箭头所示。

<mat-card-actions fxLayout="row wrap">
  <div>
    <button type="button" class="action-buttons1" [disabled]="!filterDataSelected" (click)="onClearButtonClicked()">Clear</button>
    <button type="button" class="action-buttons2" [disabled]="!filterDataSelected" (click)="fillOrRefreshTableData()">Search</button>
  </div>
  <div>
    <button type="button" class="action-buttons3" (click)="calcelProcess()">Cancel</button>
  </div>
</mat-card-actions>

如何只移动取消按钮而不移动其他按钮？我把它放在另一个<div> 块中，但我不确定它是否正确。我试图在<div> 取消按钮的定义中玩margin-padding-align，但它没有移动。

注意：所有这些代码都在 <mat-card> 块内。

【问题讨论】：

标签： html css angular frontend

【解决方案1】：

由于您已经将按钮分隔为 2 个元素，您可以将 fxLayoutAlign="space-between" 添加到父元素。像这样：

<mat-card-actions fxLayout="row wrap" fxLayoutAlign="space-between">

【讨论】：

【解决方案2】：

试试这个：

HTML

<mat-card-actions fxLayout="row wrap">
<div class="wrapper">
  <div>
    button type="button" class="action-buttons1" [disabled]="!filterDataSelected"
            (click)="onClearButtonClicked()">
      Clear
    </button>
    <button type="button" class="action-buttons2" [disabled]="!filterDataSelected"
            (click)="fillOrRefreshTableData()"
    >Search
    </button>
  </div>
  <div>
    <button type="button" class="action-buttons3" (click)="calcelProcess()">
      Cancel
    </button>
  </div>
</div>
</mat-card-actions>

CSS

.wrapper {
    display: flex;
    justify-content: space-between;
}

【讨论】：

【解决方案3】：

试试这个，在我的情况下有效！

<mat-card-actions fxLayout="row wrap" fxLayoutAlign="end center">

【讨论】：