2

我将 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;'}"仍然没有在右侧对齐：

目前输出如下： 在此处输入图像描述 虽然它应该看起来像这样： 在此处输入图像描述

4

2 回答 2

2

我刚刚检查了 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>
于 2017-01-30T14:35:32.833 回答
1

对我来说，以下作品（在 6.0.x 的 PF 展示中测试）

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

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

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

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

并使用选择器中的类

.flo .ui-tabmenuitem:last-child {
    float: right;
}
于 2017-01-31T07:50:59.160 回答