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

【问题标题】：Controlling mat-tab item position in angular以角度控制 mat-tab 项目的位置
【发布时间】：2019-09-25 17:01:08
【问题描述】：

我正在尝试使用 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 文件中实现了这一点。

有什么建议吗？

【问题讨论】：

你的问题解决了吗？

标签： css angular angular-material

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以使用 ::ng-deep，具体取决于您使用的版本。
（在 Angular 8 中，这是折旧的）

::ng-deep .mat-tab-label:last-child {
  padding-left: calc(50%) !important; 
}

【讨论】：