如何在水平方向上伸展jsf panelgrid

我有一行panelgrid作爲歡迎頁面的標題。它有5個元素。前兩個是信息，第三個是命令鏈接，後兩個是用於改變語言的命令按鈕。如何在水平方向上伸展jsf panelgrid

我想要 - 把它放在一行中 - 將它放在屏幕的整個寬度上; - 右邊兩個按鈕與屏幕右側對齊 - 前三個元素（單元/列）與右側對齊，兩者之間的空間確實很小。

我試過如下：

  <h:panelGrid columns="5" columnClasses="top_column1, top_column2, top_column3, top_column4, top_column5" style="width: 100%"> 
      <h:outputText value="#{msg.LoggedAs}:" /> 
      <h:outputText value="#{userManager.loggedUser.username}/"/> 
      <h:commandLink value="#{msg.butLogout}" action="#{userManager.logout()}" style="color: white" /> 
      <h:commandButton action="#{languageOfSystem.changeLanguage('en')}" image="/resources/icons/usa_24.png" title="english" /> 
      <h:commandButton action="#{languageOfSystem.changeLanguage('pl')}" image="/resources/icons/poland_24.png" title="polish"/> 
      </h:panelGrid>

用CSS這樣的：

.top_column1 { 
    font-weight: normal; 
} 

.top_column2 { 
} 

.top_column3 { 
    width: 78%; 
} 
.top_column4 { 
    width: 24px; 
} 
.top_column5 { 
    width: 24px; 
}

而且我已經得到的效果是這樣的： enter image description here 但仍須通過確定的寬度來實現第三列，所以如果消息將有不同的長度將有兩行而不是一個或所有東西都進入混亂。我應該如何格式化我的面板網格才能達到我想要的效果？

來源

2012-05-05 Zbyszek

添加CSS white-space屬性值爲nowrap至.top_column1。

順便說一句，這可以更好地是一個2列表，第一列的寬度爲100%，第二列包含這些語言按鈕。或者只是使用一個div並將語言按鈕右鍵懸浮。

來源

2012-05-05 11:51:43 BalusC

哇:)。我已經採取了你建議的第二種解決方案。第一列寬度爲100％的2列表格。對於第二列，我必須設置float：right。在不同的Web瀏覽器中正常工作。謝謝。 – Zbyszek

如何在水平方向上伸展jsf panelgrid

回答

相關問題