如何在水平方向拉伸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

添加white-space值为nowrapto 的CSS 属性.top_column1.

顺便说一句,这可以更好地是一个2列表,其中第1列的宽度为100%,第2列包含那些语言按钮.或者只使用div并向右浮动语言按钮.