如何将<h:panelGrid>中的项目对齐到右侧

Question

如何将我下面所有的内容右对齐？

<div id="container">    
     <h:form id="authenticate">
        <h:panelGrid columns="5" cellpadding="6">
             <h:inputText id="email" value="" />
             <p:watermark for="email" value="Email"/>
             <h:inputSecret id="password" value="" />
             <p:watermark for="password" value="Password"/>
             <p:commandButton id="login" value="Login" align="right"/>
        </h:panelGrid>
     </h:form>
</div>

- curiousgeorge

Answer 1

<h:panelGrid>元素会呈现为一个HTML表格。您基本上想在呈现出的每个<td>元素上应用text-align:right;。对于当前的代码，最简单的方法是应用以下样式：

#authenticate table td {
    text-align: right;
}

当然，你也可以更具体一些，例如为<h:panelGrid>指定自己的styleClass，并在CSS中定义规则（该规则将直接应用于呈现的HTML <table>元素）。

<h:panelGrid styleClass="className">

使用

.className td {
    text-align: right;
}

你可以通过使用 columnClasses 属性为每个 <td> 元素分别指定类名，该属性接受一个以逗号分隔的 CSS 类名字符串，这些类名将重复应用于 <td> 元素上。如果你想在每个 <td> 元素上都应用相同的类名，只需指定一次即可：

<h:panelGrid columnClasses="className">

使用

.className {
    text-align: right;
}

作为额外提示：在网络浏览器中右键单击网页并选择“查看源代码”，然后您就能更好地理解JSF究竟生成了什么。

- BalusC

---

注意：对于columnClasses，它们适用于_rendered_列，而不是所有列。对于Mojarra 2.0，这是设置生成的td元素上任何属性的唯一方法。 - Thorbjørn Ravn Andersen

你经常改进“旧”的帖子，使其更通用、更易于查找等。这个问题也可以吗？请参见http://stackoverflow.com/questions/30136972/how-to-specify-styles-for-hpanelgrid-in-jsf - Kukeltje

Answer 2

实际上，我使用了相同的形式 <p:panel> 并获得了良好的结果。看起来不错；

<p:panel  styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
    <p:commandButton value="Add New Tab"
            actionListener="#{xxx.createNewTab}" process="@this"
            update="tabView" style="float:right !important;margin:0px 0px 3px 0px;" />
            </p:panel>

- newuserua

Answer 3

有点晚了，但可能会对某些人有帮助，因为这正是我所需要的...

如果对齐不仅限于此特定表格，而是所有表格单元格的默认格式，则只需将此添加到您的CSS文件中：

td {
    text-align: right;
}

然后，所有的<td>元素，包括JSF生成的元素，都将以这种方式进行格式化。

- neizan