Primefaces 菜单栏右对齐子菜单
Posted
技术标签:
【中文标题】Primefaces 菜单栏右对齐子菜单【英文标题】：Primefaces menubar right align submenu 【发布时间】：2014-07-09 02:48:22 【问题描述】：我发现我可以在选项方面（菜单栏的右侧）播放命令按钮，但是我似乎无法以相同的方式添加子菜单。我想要一个向右对齐的实际菜单下拉菜单，而不是按钮。
有什么想法吗？
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head title="Primefaces Test">
<style>
.ui-layout-north
z-index: 20 !important;
overflow: visible !important;
.ui-layout-north .ui-layout-unit-content
overflow: visible !important;
</style>
</h:head>
<h:body>
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:menubar>
<p:submenu label="Mail">
<p:menuitem value="Gmail" url="http://www.google.com" />
<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
</p:submenu>
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
<f:facet name="options">
<p:commandButton value="logout" />
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
</f:facet>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Hello, world." />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</html>
-- 谢恩
【问题讨论】：
【参考方案1】：我用这样的方法解决它：
style="位置：绝对；右：6px；"
试试吧。
【讨论】：
【参考方案2】：我最终忘记了整个“选项”方面，而是使用了 css float，我希望这对某人有所帮助：
<h:body>
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:menubar>
<p:submenu label="Mail">
<p:menuitem value="Gmail" url="http://www.google.com" />
<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
</p:submenu>
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
<p:submenu label="Videos2" style="float:right">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Hello, world." />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
--谢恩
【讨论】：
这在您需要嵌套子菜单之前非常有效。嵌套的子菜单将在屏幕外显示。【参考方案3】：如果您使用的是引导程序，则可以使用内置的 flexbox 类
注意：这是一个primeng（角度）示例，将正确对齐所有项。
<p-menubar [model]="items" styleClass="d-flex justify-content-end"></p-menubar>
【讨论】：
我只想要右边的一项 -> 注销按钮。以上是关于Primefaces 菜单栏右对齐子菜单的主要内容，如果未能解决你的问题，请参考以下文章