在最右上角显示转移按钮

Question

<div class="account-tile" qa-name="accountBlock">
  <a
    *ngIf="link"
    class="account-detail-header"
    [routerLink]="'/AccountDetails/' + account.index!"
  >
    <div qa-name="accountName" class="account-name">
      {{ account.accountName }}
    </div>
    <div qa-name="accountNumber" class="account-number">
      ...{{ account.number | lastFour }}
    </div>
    <span>
      <i class="gg-chevron-right"></i>
    </span>
  </a>
  <div *ngIf="!link" class="account-detail-header">
    <div qa-name="accountName" class="account-name">
      {{ account.accountName }}
    </div>
    <div qa-name="accountNumber" class="account-number">
      ...{{ account.number | lastFour }}
    </div>
  </div>
  <div class="available-balance-container">
    <div class="flex">
      <span class="negative-account" *ngIf="account.availableBalance! < 0"
        >-</span
      >
      <span
        [ngClass]="link ? 'format-dollar-link' : 'format-dollar-display'"
        class="format-dollar"
      >
        $
      </span>
      <h2 qa-name="availableBalance">
        {{ account.availableBalance | currency: '':'' | absolute }}
      </h2>
<!--This is wheere the transfer button appears-->
<div class="parent=class">
<button class="button-right pull-right">Transfer</button>
</div>
    </div>
    <h3>Available Balance</h3>
  </div>
</div>

我试图在右上角显示一个传输按钮，看起来像上图。我怎样才能做到这一点？我尝试创建一个按钮和一个将按钮拉到右侧的类。当我编译代码时，转账按钮显示在账户金额下方

Answer 1

您可以将position: absolute 添加到您的转移按钮。

.parent-class {
  position: relative;
  height: 100px;
  border: 1px solid red;
}

.button-right {
  position: absolute;
  right: 10px;
}

<div class="parent-class">
  <button class="button-right">Transfer</button>
</div>