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>

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

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

Answer 1

我刚刚检查过primefaces使用的css。我发现您的css代码用于% cat file.txt BOOK 12 SHELF 2 DESK 3 % awk '{sum+=$2} END{print sum}' file.txt 17元素而不是外部<a>元素。当我手动将您的CSS添加到外部<li>元素时，它可以正常工作。您需要找到一种方法将您的CSS添加到外部<li>

或者，您可以使用

<li>

您的<p:panelGrid columns="2" layout="grid" columnClasses="ui-grid-col-10,ui-grid-col-2>元素的第一个元素没有上一个<p:tabMenu>
，第二个可以是<p:menuitem>元素

<p:commandLink>

查看primefaces {{3}}元素

更新 - 这不是分数，只是答案你应该接受@Kukeltje的回答

<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>

Answer 2

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

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

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

更新：正如@mismanc和OP发现的那样，styleClass不支持tabMenu或相关，但class是<p:tabMenu class="flo"> ... </p:tabMenu>。所以如果你不想在每个tabmenu上都这样想

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

并使用选择器中的类

[Service]
User=ubuntu
Group=www-data

Primefaces p：tabMenu将p：menuitem对齐到

2 个答案: