css - Primefaces 菜单栏垂直分隔符

Question

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

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

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

谢谢。

Answer 1

我用下一个 CSS 做到了：

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

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

Answer 2

尝试这个：

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

Answer 3

尝试这个：

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

Answer 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 />菜单项的水平分隔。