如何从 PrimeNG 配置 p 菜单栏以从右向左展开响应式版本

Question

如何设置 CSS 样式，或如何配置 PrimeNg 中的 p 菜单栏，使其在响应式版本中从右向左展开，因为在当前版本中，使用类时

align-items-center flex justify-content-between

菜单会粘在右边缘，并且“尝试”扩展到右侧。

<div class="header-container align-items-center flex justify-content-between">
  <img src="/assets/logo.png" alt="Image" height="40">
  <p-menubar [model]="items"></p-menubar>
</div>

我尝试了很多基于 css right、top、position、flex 中不同设置的解决方案，但一切最终看起来都不平衡:(

Answer 1

你可以尝试下面的CSS吗？你做了同样的事情，但我将面板设置为绝对并将其从右到左定位，也使用

width: fit-content

我们能够保持完整宽度！

.right-menu {
  display: flex;
  align-items: center;
  justify-content: end;
  position: relative;
}

.right-menu-panel ul[role='menu'].p-menubar-root-list {
  width: fit-content;
  position: absolute;
  left: auto;
  right: 0px;
  top: 102%;
}

Stackblitz 演示