Primefaces菜单栏menuitem宽度

Question

我在menuitem遇到麻烦:(

想要包括一张照片,但是不被允许 所以没有它就是愚蠢的问题

我似乎无法改变下拉菜单的宽度,我在每个菜单项中都包含了一个样式和一个宽度属性,但它们没有区别:

<style>
ui-menu .ui-menu-parent .ui-menu-child
{
    width: 400px; /* exagerated !! */
}
</style>

菜单项突出显示时,选择条的宽度正确!

任何线索???,这是一个示例菜单栏

<p:menubar>
    <p:submenu label="Menu 1"
        style="text-align: left;">

        <p:menuitem ajax="false" 
                    action="/Page1"
                    value="Page 1" 
                    style="width: 350px;"/>

        <p:menuitem ajax="false" 
                    action="/too_long_page"
                    value="Some really long menu text that is far too long"
                    style="width: 350px;" />

        <p:menuitem ajax="false" 
                    action="/too_long_page"
                    value="Some really long menu text that is far too long"
                    style="width: 350px;" />

    </p:submenu>
    <p:menuitem ajax="false" 
                action="/Page2"
                value="Page 2" />
</p:menubar>

Answer 1

如果您希望宽度跟随您的内容,请使用此选项

ul.ui-menu-child {
    white-space: nowrap;
    width: auto !important;
}

Answer 2

用这个:

<style>    
       ul.ui-menu-child
        {
            white-space: nowrap;
            width: 290px !important;
        }
</style>

只更改你需要的像素:)菜单的下拉宽度会改变.

Answer 3

头部中的样式元素可能会被页面标记上放置在其后面的 Primefaces 样式表覆盖。如果您通过 Firebug 查看该页面，您可能会注意到自定义样式实际上被 Primefaces 样式表覆盖。

在这一点上，您的样式表是正确的，因为使用 Firebug 我能够通过在 DOM 元素上强制此样式来增加菜单宽度。

尝试将此样式标签放在正文中，看看是否会产生影响。