以角度控制 mat-tab 项目位置

Question

我正在尝试使用 angular material 选项卡组件达到以下结果：

到目前为止我尝试过但没有成功的是使用带有 margin-left: auto 的 flex 属性，它应该将特定项目一直推到右边。

在此处添加我的代码：

<mat-tab-group>
  <mat-tab label="Top 5"></mat-tab>
  <mat-tab label="All Drivers"> Content 2</mat-tab>
  <mat-tab style="margin-left: auto" label="All Drivers"> Content 3</mat-tab>
</mat-tab-group>

在检查工具上，我设法使用 margin-left: auto 但不在 CSS 文件中实现了这一点。

有什么建议？

Answer 1

您可以在style.css文件中使用以下 CSS 类： StackBlitz

.mat-tab-label:last-child {
  margin-left: auto; 
}