Question

如何使more_vert按钮在标题的右侧对齐？我正在使用Angular 7和Material UI。

 <mat-toolbar color="primary" class="mat-elevation-z10">
<span>
  <mat-icon>favorite</mat-icon>
  Derek Zoolander's Center for Models Who Can't Find Love
</span>
<button mat-icon-button [mat-menu-trigger-for]="menu">
  <mat-icon>more_vert</mat-icon>
</button>

Answer 1

关键是要在标题<span class="example-spacer"></span>和“ more_vert ” <span>之间插入mat-icon。

完整的HTML ：

<mat-toolbar color="primary" class="mat-elevation-z10">

  <mat-toolbar-row>
    <mat-icon>favorite</mat-icon>
    <span>
      Derek Zoolander's Center for...
    </span>
    <span class="example-spacer"></span>
    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon class="example-icon" aria-hidden="false" aria-label="expand menu">more_vert</mat-icon>
    </button>
  </mat-toolbar-row>

</mat-toolbar>

您可以检查working example here ...

在Angular材质的右侧对齐more_vert按钮

1 个答案: