PrimeNg TabMenu Angular 11：在右侧设置最后一个选项卡

Posted 2023-03-16

【中文标题】PrimeNg TabMenu Angular 11：在右侧设置最后一个选项卡

【英文标题】：PrimeNg TabMenu Angular 11: set last tab on the right

【发布时间】：2021-04-25 17:04:01

【问题描述】：

我正在使用 Angular 11 和 PrimeNG 并使用 Flex 进行样式设置。

来自 PrimeNG 我现在正在使用 TabMenu。

现在想象一下，我想放置三个选项卡：选项卡 1、选项卡 2 和选项卡 3。我想在浏览器的左侧放置选项卡 1 和选项卡 2，而在右侧我只需要选项卡 3。

我正在使用下一个样式：

.p-tabmenu .p-reset 
  width: 100%;
  display:flex;  
  justify-content: flex-start;
  background-color: red !important;
  flex-wrap: wrap;

还有李孩子：

.p-tabmenu .p-reset > li:nth-child(5)  
  float: right;

thisd style angular 无法识别，我不明白为什么。

如何使用 Flex 将 Tab 3 设置在右侧？或者可能具有 TabMenu 的某些属性？

【问题讨论】：

试试:host >>> .p-tabmenu .p-reset > li:nth-child(5)

>>>是什么意思？

在搜索>>> 的定义时（它只是::ng-deep 的别名。），我遇到了这个博客blog.angular-university.io/angular-host-context 说它很快就会被弃用，所以我收回我之前的评论。

非常感谢

【参考方案1】：

我在 CSS 中找到的一个解决方案是：

.p-tabmenu .p-reset 
  position: relative;


.p-tabmenu .p-reset > li:nth-child(5)  
  position: absolute;
  right: 0;
  top: 0;
  

这行得通。