如何用CSS将MSG Count按钮对齐到detail-row-container右上角？

我需要把MSG Count按钮显示在detail-row-container div的右上角，当前按钮位置不符合预期，尝试调整边距没有效果。

HTML代码 #

<div class="driver-card-wrapper tms-card tms-card-border" (click)="onClick($event)"
  [ngClass]="{'driver-clicked': clicked, 'driver-selected': (selected$ | async)}" appDblClick
  (dblclick)="onDblClick($event)">

  <div class="detail-row-container">
    <!-- ----------------------------------- ROW ------------------------------------ -->
    <div class="detail-row-wrapper">
      <div class="detail-wrapper" style="flex-basis: 62%">
        <span class="detail-text"><b>{{driver?.lastName | titlecase}}, {{driver?.firstName | titlecase}}</b></span>
      </div>
    </div>
    <!-- ----------------------------------- ROW ------------------------------------ -->
    <div class="detail-row-wrapper">
      <div class="detail-wrapper" style="flex-basis: 140px; color: #AAA">
        <span>{{driver?.id}}</span>
      </div>
      <div class="detail-wrapper">
        <span class="uxd-home md-16"></span>
        <span>{{(driver?.domicile?.site || driver?.domicile?.slic) | uppercase}}</span>
      </div>
      <div *ngIf="!!groupListText">
        <span class="uxd-4-4-alt" matTooltip="{{groupListText}}" matTooltipClass="group-list-tooltip" [matTooltipPosition]="'left'"></span>
      </div>
    </div>
  </div>
  <!-- -------------------------------- MSG COUNT --------------------------------- -->

  <div class="tms-mini-mini-btn" *ngIf="driver?.unreadMessages">
    <button mat-mini-fab color="accent">
      <span class="md-10">{{driver?.unreadMessages}}</span>
    </button>
  </div>
</div>

CSS代码 #

.driver-card-wrapper {
  cursor: pointer;
  margin: 3px;
  padding: 4px;
  width: auto;
  height: auto;
  min-height: 52px;
  min-width: 330px;
  box-sizing: border-box;
  flex-direction: row;
  display: flex;
  overflow: hidden;

  & .uxd-4-4-alt {
    font-size: 14px;
  }
}

.driver-selected {
  border: 3px #2196F3 solid !important;

  .driver-card-wrapper {
    border: 3px #2196F3 solid !important;
  }
}

.driver-clicked {
  border: 3px rgba(161, 195, 223, 0.66) solid !important;

  .driver-card-wrapper {
    border: 3px rgba(161, 195, 223, 0.66) solid !important;
  }
}

.detail-row-container {
  flex-direction: column;
  display: flex;
  width: 87%;
}

.detail-row-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 auto;
}

.detail-wrapper {
  display: flex;
  align-items: center;
  color: black;
  font-size: 13px;
  max-width: 60%;
  min-width: 15%;
  flex-basis: 60%;
  white-space: nowrap;
}

.detail-text {
  white-space: nowrap;
  @include text-ellipsis();
}

.detail-text:hover {
  white-space: pre-wrap;
  overflow: visible;
}

.tms-mini-mini-btn>.mat-mdc-mini-fab {
  height: 20px;
  width: 20px;
  line-height: 30px;
}

::ng-deep .group-list-tooltip {
  white-space: pre-line;
  max-width: unset !important;
  font-size: 14px;

  .mdc-tooltip__surface {
    max-width: unset !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: left !important;
    background-color: rgba(33, 33, 33, 0.8) !important;
  }
}

当前显示效果 #

期望显示效果 #

解决方案 #

方法1：利用Flex布局快速对齐（无需修改HTML） #

给.tms-mini-mini-btn添加以下CSS规则，借助flex布局的自动边距和对齐属性，将按钮推到父容器右上角：

.tms-mini-mini-btn {
  margin-left: auto;
  align-self: flex-start;
  /* 可选：调整与容器边距，匹配设计 */
  margin-top: 4px;
  margin-right: 4px;
}

原理：margin-left: auto会在flex row布局中把元素推到最右侧，align-self: flex-start让元素顶部对齐，从而贴合容器右上角。

方法2：绝对定位（精准绑定detail-row-container） #

如果需要按钮严格相对于detail-row-container的右上角定位，可按以下步骤操作：

1. 调整HTML结构：将按钮移动到detail-row-container内部（位置不影响，建议放在最顶部）：

<div class="detail-row-container">
  <div class="tms-mini-mini-btn" *ngIf="driver?.unreadMessages">
    <button mat-mini-fab color="accent">
      <span class="md-10">{{driver?.unreadMessages}}</span>
    </button>
  </div>
  <!-- 原有行内容保持不变 -->
  <div class="detail-row-wrapper">...</div>
  <div class="detail-row-wrapper">...</div>
</div>

2. 添加定位CSS：

.detail-row-container {
  /* 保留原有样式，新增相对定位 */
  position: relative;
}

.tms-mini-mini-btn {
  position: absolute;
  top: 0;
  right: 0;
  /* 可选：添加边距避免按钮贴边 */
  margin: 4px;
}

原理：给detail-row-container设置position: relative后，内部的绝对定位元素会以它为参考点，top:0; right:0直接将按钮固定在其右上角。

内容的提问来源于stack exchange，提问作者QueenBee