PrimeNG，右侧的菜单栏项目

Question

我有一个PrimeNG菜单栏组件，我希望我的项目在右侧，它们当前在左侧，我如何将它们与右侧对齐？在本例中，我希望所有这些元素都向右对齐，而不仅仅是一个特定的元素

<p-menubar [model]="items">
</p-menubar>

export class NavigationComponent implements OnInit {
  items: MenuItem[];

  constructor() { }

  ngOnInit(): void {
    this.items = [
      {
        label: 'Solicitudes (5)',
        icon: 'pi pi-fw pi-clock'
      },
      {
        label: 'FrankHesse',
        icon: 'pi pi-fw pi-user',
        items: [
          {
            label: 'Perfil',
            icon: 'pi pi-fw pi-user'
          },
          {
            label: 'Salir',
            icon: 'pi pi-fw pi-power-off'
          }
        ]
      }
    ];
  }

}

我尝试通过以下方式修改styles.scss文件

#mercadeoucab .p-menuitem{
    float: right !important;
}

mercadeoucab是index.html文件中我的body的ID，但是它什么也没做，我该怎么做呢？

Answer 1

尝试以这种方式覆盖PrimeNG CSS：

::ng-deep .p-menubar {
  height: 50px;

  p-menubarsub {
    position: absolute;
    right: 40px;
  }
}

请参阅demo

Answer 2

对我来说，我是用下面的CSS实现的：

p-menubarsub{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

这将使所有项目向右对齐，并且在折叠时工作良好。但是，在折叠时，三明治菜单仍将显示在左侧，如果您还希望它显示在右侧，请添加以下css：

 a.p-menubar-button{
    order: 3;
}