如何在Angular Material中将头部的搜索、登录、注册按钮置于菜单右侧？

核心思路是利用mat-toolbar本身的flex布局特性，把右侧按钮组推到容器最右侧，有两种常用实现方式：

方式一：原生CSS实现 #

直接给右侧按钮容器添加margin-left: auto，让它自动占据剩余空间并靠右：

模板代码 #

<mat-toolbar color="primary">
  <!-- 左侧菜单元素 -->
  <button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>menu</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>首页</button>
    <button mat-menu-item>产品</button>
    <button mat-menu-item>关于我们</button>
  </mat-menu>

  <!-- 右侧按钮组 -->
  <div class="toolbar-right">
    <button mat-icon-button>
      <mat-icon>search</mat-icon>
    </button>
    <button mat-button>登录</button>
    <button mat-raised-button color="accent">注册</button>
  </div>
</mat-toolbar>

CSS样式 #

.toolbar-right {
  margin-left: auto;
  display: flex;
  gap: 8px; /* 控制按钮之间的间距 */
  align-items: center; /* 确保按钮垂直居中 */
}

方式二：用@angular/flex-layout库实现 #

如果你项目里引入了@angular/flex-layout，可以用它的布局指令更便捷地控制：

模板代码 #

<mat-toolbar color="primary" fxLayout="row" fxLayoutAlign="start center">
  <!-- 左侧菜单 -->
  <button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>menu</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>首页</button>
    <button mat-menu-item>产品</button>
    <button mat-menu-item>关于我们</button>
  </mat-menu>

  <!-- 右侧按钮组 -->
  <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
    <button mat-icon-button>
      <mat-icon>search</mat-icon>
    </button>
    <button mat-button>登录</button>
    <button mat-raised-button color="accent">注册</button>
  </div>
</mat-toolbar>

这里fxFlex让右侧容器占据剩余空间，fxLayoutAlign="end center"把按钮靠右且垂直居中，fxLayoutGap控制按钮间距。

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