Primefaces p:tabMenu 将 p:menuitem 向右对齐

Question

我正在使用带有 JDK 1.8、Maven 和 Primefaces 的 Java EE。关于 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>

最后一个菜单项中的这段代码 sn-p 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.0.x 的 PF 展示中测试）

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

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

更新： 正如@mismanc 和 OP 发现的那样，tabMenu 不支持styleClass 或相关，但class 支持。因此，如果您不想在每个选项卡菜单上都使用它

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

并使用选择器中的类

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