如何在p：menubar中相应地分发p：menuitems？

Question

我有<p:menubar>一些<p:menuitem>来向用户显示水平菜单。这是我目前的简化代码（删除国际化和其他非相关的东西）：

<p:menubar id="mbrMainMenu" styleClass="centeredMenuBar">
    <p:menuitem value="Home" outcome="/index.xhtml" />
    <p:submenu label="Product Catalog">
        <!-- some menuitems here... -->
    </p:submenu>
    <p:submenu label="Make your own design">
        <!-- some menuitems here... -->
    </p:submenu>
</p:menubar>

上面的代码显示如下：

 _____________________________________________________ _____________________________________
|        |                   |                        |                                     |
|  Home  |  Product Catalog  |  Make your own design  |         <wasted whitespace>         |
|________|___________________|________________________|_____________________________________|

我正在寻找一个感觉<p:menuitem>和<p:submenu>居中的地方，并且相应地分配每个的宽度（我不熟悉CSS）：

 _______________________________________________________________________________
|                  |                           |                                |
|       Home       |      Product Catalog      |      Make your own design      |
|__________________|___________________________|________________________________|

我已经找到了如何使用自定义CSS centeredMenuBar（取自这里：How to centralize primefaces menubar?）来居中它们，但现在我很难尝试在菜单中分发菜单项吧，他们都坚持。

 __________________________________________________________________ ____________
|            |        |                   |                        |            |
|  <wasted>  |  Home  |  Product Catalog  |  Make your own design  |  <wasted>  |
|____________|________|___________________|________________________|____________|

我试过这个却失败了：

1. 创建自定义CSS以覆盖ui-menu-item和ui-menu-parent PrimeFaces样式：

   .ui-menu-item .ui-menu-parent {
       width: auto;
   }
   

2. 直接在style="width: auto;"和<p:menuitem>中使用<p:submenu>。

知道怎么做到这一点吗？

---

这就是我所拥有的：



这就是我想要的（在油漆中编辑的最后一张图片只是为了显示最后一张表格）：

Answer 1

我试过这个，这对我来说很合适，这里没有浪费空间。你可以试试这个。

这是我的<p:menubar>。请注意，我使用的是当前解决方案中建议的styleClass="menu"而不是centeredBar。

<p:menubar styleClass="menu">
    <p:menuitem value="Home"></p:menuitem>
    <p:menuitem value="Apply Leave"></p:menuitem>
    <p:menuitem value="Calender"></p:menuitem>
    <p:submenu label="New">  
       <p:menuitem value="Project" url="#" />  
       <p:menuitem value="Other" url="#" />  
    </p:submenu>
</p:menubar>

这是我写过的CSS

div.menu{
text-align: center;
}
.menu div.ui-menubar {
text-align: center;
}
.menu .ui-menu-list{
width:100%;
display: inline-flex;
}
div.menu>ul.ui-menu-list>li>a{
width: 100%;
}
div.menu>ul.ui-menu-list>li{
width: 100%;
}
.ui-menuitem-text{
float: none!important;
}

Answer 2

如下图所示设置margin-left和margin-right对我来说有助于拉伸菜单项在菜单栏的长度上均匀分布。

.ui-menubar .ui-menuitem-text{
    font-size: 20px;
    padding: 3px;
    margin-left: 25px;
    margin-right: 25px;
}

希望它有助于某人寻找替代解决方案。