Primefaces p:tabMenu 向右对齐 p:menuitem

Question

我将 Java EE 与 JDK 1.8、Maven 和 Primefaces 一起使用。关于 Primefaces 的 tabMenu 我有以下问题：如何将最后一个菜单项右对齐？请在下面查看我的代码：

<p:tabMenu activeIndex="#{param.i}">
    <p:menuitem value="Login" outcome="/Person/PersonLogin.xhtml"
          icon="fa fa-sign-in"
          rendered="#{!personModel.personLoggedIn()}">
       <f:param name="i" value="#{(!personModel.personLoggedIn())?0:99}"/>
    </p:menuitem>
    <p:menuitem value="Register" outcome="/Person/PersonRegistration.xhtml"
          icon="fa fa-user-plus"
          rendered="#{!personModel.personLoggedIn()}">
       <f:param name="i" value="#{(!personModel.personLoggedIn())?3:95}"/>
    </p:menuitem>
    <p:menuitem value="#{personModel.usedAccount.balanceFormatted}"
          outcome="/Overviews/TransactionOverview.xhtml"
          style="float:right; margin-right: 30px; #{personModel.usedAccount.balance >=0 ? 'color:green;' : 'color:red;'}"
          rendered="#{personModel.personLoggedIn()}">
       <f:param name="i" value="#{(personModel.personLoggedIn())?123:94}"/>
   </p:menuitem>
</p:tabMenu>

最后一个菜单项中的这段代码 style="float:right; margin-right: 30px; #{personModel.usedAccount.balance >=0 ? 'color:green;' : 'color:red;'}" 仍然没有在右侧对齐：

当前输出如下：虽然它应该是这样的：

Answer 1

我刚刚检查了 primefaces 使用的 css。我看到您的 css 代码用于 <a> 元素而不是外部 <li> 元素。当我手动将您的 css 添加到外部 <li> 元素时，它可以正常工作。您需要找到一种方法将 css 添加到外部 <li>

或者，您可以使用

<p:panelGrid columns="2" layout="grid" columnClasses="ui-grid-col-10,ui-grid-col-2>

第一个元素你的 <p:tabMenu> 元素没有最后一个 <p:menuitem>
第二个可以是<p:commandLink>元素

<p:panelGrid columns="2" layout="grid" columnClasses="ui-grid-col-10 tabMenucssclass,ui-grid-col-2 commandlinkcssclass> <p:tabMenu></p:tabMenu> <p:commandLink></p:commandLink> </p:panelGrid>

查看 primefaces panelGrid 元素

更新 - 这不是为了得分，只是为了回答你应该接受@Kukeltje 回答

.flo .ui-tabmenuitem:last-child{float: right;}
<p:tabMenu class="flo"></p:tabMenu>

Answer 2

对我来说以下作品（在6日的PF showcase中测试0.x）

.ui-tabmenuitem:last-child {
  float: right !important;
}

虽然最好不要使用 !important 并查看是否将 styleClass 添加到 menuItem 或 tabMenu 并在您的选择器中使用它（抱歉，没有时间尝试）。

更新：正如@mismanc 和 OP 发现的那样， tabMenu 不支持 styleClass 或相关的，但 class 是。所以如果你不想在每个选项卡菜单上都有这个

<p:tabMenu class="flo">
   ...
</p:tabMenu>

并在选择器中使用 class

.flo .ui-tabmenuitem:last-child {
    float: right;
}

Primefaces p:tabMenu 向右对齐 p:menuitem

Primefaces p:tabMenu align p:menuitem to right

css

jsf

primefaces

tabmenu