css - 以 Angular 控制 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; 
}