我有一个单行面板网格作为欢迎页面的标题。它有 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;
}
我得到了这样的效果: 但它仍然是通过确定第三列的宽度来实现的,因此如果消息的长度不同,将会有两行而不是一行,或者所有内容都会变得一团糟。我应该如何格式化我的面板网格以实现我想要的?
最佳答案
将值为 nowrap
的 CSS white-space
属性添加到 .top_column1
。
顺便说一下,这最好是一个 2 列表,其中第 1 列的宽度为 100%
,第 2 列包含这些语言按钮。或者只使用 div 并将语言按钮向右浮动。
关于css - 如何在水平方向拉伸(stretch)jsf panelgrid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10460115/