가로 세로 방향으로 jsf panelgrid 늘이기

Question

환영 페이지의 헤더로 한 행의 panelgrid가 있습니다. 그것에는 5 가지 요소가 있습니다. 처음 두 개는 정보이고, 세 번째는 명령 링크이며, 마지막 두 개는 언어를 변경하는 명령 버튼입니다.

내가 원한다면 - 한 줄로 표시하십시오. - 화면의 전체 너비에 두십시오. - 화면의 오른쪽에 두 개의 오른쪽 버튼이 정렬되어 있습니다. 처음 세 요소 (셀/열)가 오른쪽 사이에 작은 간격으로 정렬되어 있습니다.

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

그리고이 같은 효과를 가지고있다 : 을하지만 여전히이의 폭을 결정함으로써 달성되었다 세 번째 열에는 메시지의 길이가 다르면 하나가 아닌 두 개의 행이 표시되거나 모든 것이 엉망이됩니다. 내가 원하는 것을 얻기 위해 패널 격자를 어떻게 포맷해야합니까?

Answer 1

nowrap에서 .top_column1의 값을 갖는 CSS white-space 속성을 추가하십시오.

그러나이 방법은 1 열의 너비가 100%이고 2 열에 해당 언어 버튼이 포함 된 2 열 테이블을 사용하는 것이 더 좋습니다. 또는 div를 사용하고 언어 버튼을 오른쪽으로 띄우십시오.