2

ユーザーに水平メニューを表示するためにいくつかの s があり<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(ここから取得: Primefaces メニューバーを中央に配置する方法) が、メニュー項目をメニュー バーに沿って配置するのに苦労しています。

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

私はこれを試しましたが失敗しました：

  1. ui-menu-item および ui-menu-parent PrimeFaces スタイルをオーバーライドするカスタム CSS を作成します。

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

  2. とstyle="width: auto;"で直接使用します。<p:menuitem><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 に答える