Primefaces p：tabMenu將p：menuitem對齊到右邊

我使用Java EE和JDK 1.8，Maven和Primefaces。關於Primefaces的tabMenu，我有以下問題：如何將最後一個菜單項對齊到右側？請參閱下面我的代碼：Primefaces p：tabMenu將p：menuitem對齊到右邊

<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;'}"在最後菜單項仍然不對齊，右側：

目前輸出如下：而它應該看起來像這樣：

來源

2017-01-30 FranzHuber23

對我下面的作品（在6.0.x的PF展櫃中測試）

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

雖然最好不要使用！很重要，看看是否將styleClass添加到menuItem或tabMenu中，並在選擇器中使用它（無暇嘗試，很抱歉）。

更新：由於@mismanc和OP發現，styleClass或相關不支持tabMenu，但class是。所以，如果你不想這對每一個tabmenu

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

和使用類中選擇

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

來源

2017-01-31 07:50:59 Kukeltje

添加樣式類不起作用，不支持添加containerStyle：https://github.com/primefaces/primefaces/issues/1450 ... – FranzHuber23

感謝您的調查。所以在不遠的將來（pf 6.1）它將被支持 – Kukeltje

是的;）但是你的解決方案現在也可以運行。與[mismanc]（http://stackoverflow.com/users/1562723/mismanc）一起，我想出了它。 – FranzHuber23

我剛剛檢查了使用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:menuitem>
和第二個你<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元素

更新 -這不是分數，只是爲了回答你應該接受@Kukeltje答案

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

來源

2017-01-30 14:35:32 mismanc

我想我會嘗試這一點;） – FranzHuber23

更新我的答案。我添加面板網格草案和columclasses，你可以使用;） – mismanc

這工程，但[看起來相當醜陋]（D :) – FranzHuber23

Primefaces p：tabMenu將p：menuitem對齊到右邊

回答

相關問題