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

Posted 2023-03-16

【中文标题】Primefaces p:tabMenu 将 p:menuitem 向右对齐

【英文标题】：Primefaces p:tabMenu align p:menuitem to right

【发布时间】：2017-01-30 12:56:52

【问题描述】：

我正在使用带有 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;'" 仍然没有在右侧对齐：

目前的输出如下： 虽然它应该看起来像这样：

【参考方案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-childfloat: right;
<p:tabMenu class="flo"></p:tabMenu>

【讨论】：

我想我会试试这个；）

我更新了我的答案。我添加了您可以使用的面板网格草稿和列类；）

这可行，但looks quite ugly :D

是的，您需要编写一些 css 命令linkcssclass :) 顺便说一下@Kukeltje 的回答可能会对您有所帮助。我会测试它

你是对的 :D 我混合了两种解决方案，现在看起来很糟糕 :D 但我会尝试解决这个问题。

【参考方案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;

【讨论】：

添加样式类不起作用，不支持添加containerStyle：github.com/primefaces/primefaces/issues/1450...

感谢您的调查。所以在不远的将来（pf 6.1）它将被支持

是的 ;) 但是您的解决方案现在也可以正常工作。和mismanc一起我想通了。