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 是我的 body 在 index.html 文件中的 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;
}

PrimeNG，右侧的菜单栏项目

PrimeNG, Menubar items to the right side

css

primeng

angular

primeng-menu