2

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

<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（取自此处：如何集中 primefaces 菜单栏？），但现在我很难尝试沿着菜单栏分布菜单项，它们都是棒的。

 __________________________________________________________________ ____________
|            |        |                   |                        |            |
|  <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>and中使用<p:submenu>。

知道如何做到这一点吗？

这就是我所拥有的：

在此处输入图像描述

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

在此处输入图像描述

4

2 回答 2

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;
}
于 2013-09-22T05:11:10.487 回答
-1

在我的案例中，如下所示设置 margin-left 和 margin-right 有助于将菜单项均匀地分布在菜单栏的长度上。

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

希望它可以帮助寻找替代解决方案的人。

于 2014-12-17T20:09:38.833 回答