Primefaces p：tabMenu p：menuitemを右に整える

Question

JDK 1.8、Maven、PrimefacesでJava EEを使用しています。 Primefaceの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

を受け入れる必要があり、スコアのためではありません6.0xのPFショーケースでテスト済み）

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

！importantを使用しないほうがいいですが、menuItemやtabMenuにstyleClassを追加してセレクタでそれを使用すると、（試してみる時間が無駄です）。

更新： @mismancとOPが見つかったので、styleClassまたは関連はtabMenuではサポートされていませんが、classではサポートされていません。だから、すべてのtabmenu

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

上でこれをしたいとセレクタ

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

Answer 2

私は、プライムフェイスが使用したCSSをチェックしました。そして、あなたのCSSコードは、要素の代わりに<a>要素に使用されています。私は手動で外側の<li>要素にあなたのCSSを追加するとき、それはあなたが望むように働いています。あなたが使用することができ、外<li>

にあなたのCSSを追加する方法を見つける必要があるか

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

• 最初の要素最後<p:menuitem>

• 2つ目のないあなたの<p:tabMenu>要素をすることができa <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要素

UPDATE -これは単に答えのためにあなたは（私にとっては、次の作品を@Kukeltjeの答え

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