Css 如何在水平方向拉伸jsf panelgrid

我有一行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>

我的效果是这样的：

---

但它仍然是通过确定第三列的宽度来实现的，所以如果消息的长度不同，那么将有两行而不是一行，否则所有内容都会一团糟。我应该如何格式化面板网格以达到我想要的效果？

将值为

nowrap

的CSS

空白

属性添加到

.top\u column1

顺便说一下，这最好是一个两列的表格，其中第一列的宽度为

100%

，第二列包含这些语言按钮。或者只需使用一个div并向右浮动语言按钮。

Wow:）。我采取了你建议的第二种解决办法。2列表格，第一列宽度为100%。对于第二列，我必须设置float:right。在不同的web浏览器中工作良好。谢谢

.top_column1 {
    font-weight: normal;
}

.top_column2 {
}

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