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

对我来说，我使用以下 CSS 做到了：

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

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

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

Answer 2

p-menubar

是一个弹性容器，这意味着您可以使用此CSS来扩展其中一个项目（例如中间的一个）：

    p-menubarsub {
        flex-grow: 1;
    }

Answer 3

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

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

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

参见 演示