如何将菜单栏的主要子菜单向右对齐？

Question

我有侧边栏和水平导航栏。我使用的是ng（9.1.3版本）菜单栏。

nav-bar-component.html

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

nav-bar-component.ts

export class NavBarComponent implements OnInit { 

  items: MenuItem[];

  constructor() {
    
  }

  ngOnInit() {
    this.items = [
      {
        label: "User",
        icon: "pi pi-fw pi-user",
        items: [
          { label: "Profile", icon: "pi pi-fw pi-user" },
          { label: "Change Password", icon: "pi pi-fw pi-cog" },
          { label: "Log Out", icon: "pi pi-fw pi-power-off" },
        ],
      },
    ];
  }
}

nav-bar-component.scss

:host ::ng-deep .ui-menubar .ui-menubar-root-list {
  float: right;
}

菜单栏的子菜单退出屏幕。我们如何解决该问题？

Answer 1

您可以尝试使用{ String currentOwnId = myResultTuples.getString(5); if (!lastOwnId.equals(currentOwnId)) { //not same user need to print once ,if same user ,so don't print System.out.print("First name: " + myResultTuples.getString(1) + ", Last name: " + myResultTuples.getString(2) + "\n"); }lastOwnId = currentOwnId; System.out.print("\tYear: " + myResultTuples.getString(3) + ", Guitar: " + myResultTuples.getString(4) + ", Owner ID: " + currentOwnId + "\n"); } 。

styles.css

right: 0

.html

.align-right .p-menubar-root-list>li:last-child .p-submenu-list {
  right: 0;
}

演示here！

Answer 2

问题是html上的y轴溢出：

在全局CSS上使用它：

body, html {
  overflow-y: hidden;
}