Primefaces 菜单栏垂直分隔符答案

【问题标题】：Primefaces menubar vertical separatorPrimefaces 菜单栏垂直分隔符
【发布时间】：2013-10-15 03:27:10
【问题描述】：

我正在使用 PrimeFaces 3.5。 p:toolbar (https://www.primefaces.org/showcase/ui/panel/toolbar.xhtml) 中有一个垂直分隔符。

我想在p:menubar 中使用垂直分隔符。当我在p:menubar 中使用<p:separator /> 标签时，它会生成一个水平分隔符。

如何在p:menubar 中使用垂直分隔符？

谢谢。

【问题讨论】：

这段代码是什么？输出在哪里？
你的意思是链接中的代码？

标签： css primefaces

【解决方案1】：

试试这个：

<p:separator id="customSeparator" style="width:100%;height:1px" />

【讨论】：

创建水平分隔符，而不是垂直分隔符
对不起！...如果您尝试设置 style="width:1px; height:100%;"
我试过了，但也没有用。它创建一个 1px 的水平分隔符，其余的菜单元素位于该分隔符下
试试这个：style="width:1px; height:100%; float:left;"
您的网站是否在线以便我可以看到问题？很难像这样帮忙。

【解决方案2】：

我用下一个 css 做到了：

.ui-menu .ui-separator { 
   background: #A8A8A8; 
   border: none; 
   width: 1px; 
   clear: none; 
   height: 22px; 
   margin: 4px 6px 0; 
   box-shadow: none; 
}

关键是width和clear。您可以根据自己的喜好调整高度、背景颜色和边距。

【讨论】：

【解决方案3】：

试试这个：

<p:spacer width="1" height="22" style="position: relative; bottom: -5px;background-color: #A8A8A8; margin-left: 10px;margin-right: 10px" />

【讨论】：

这是一个可行的解决方案，但我会删除 height="22" 并添加 style="height: 100% !important;"
这是一个选项。但由于调整bottom: -5px，我选择保持固定。也就是说，根据height的值，必须将bottom的值改为center。

【解决方案4】：

现在回答为时已晚，但希望它对某人有所帮助。

使用最新版本的 primefaces (v10 current) .. 对于 primefaces 菜单栏垂直分隔符，您可以使用

<p:divider layout="vertical"/>

对于那些使用较低版本且找不到任何东西的人.. 使用技巧 - 显示子菜单的右边框，它将像垂直分隔符一样工作。有点像

<p:menubar style="bgcolor: black;">
    
    <p:submenu label="Submenu1" icon="pi pi-list" style="border-right: 1px solid #c8c8c8;">
        <p:menuitem value="Menu01" action="#{bean.method01}" />
        <p:separator />
        <p:menuitem value="Menu02" action="#{bean.method02}" />
    </p:submenu>
    
    <p:submenu label="Submenu2" icon="pi pi-list" style="border-right: 1px solid #c8c8c8;">
        <p:menuitem value="Menu11" action="#{bean.method11}" />
        <p:separator />
        <p:menuitem value="Menu12" action="#{bean.method12}" />
        
    </p:submenu>
    
</p:menubar>

注意 - 我使用 <p:separator /> 来进行菜单项的水平分隔。

【讨论】：