如何将 <h:panelGrid> 中的项目向右对齐答案

【问题标题】：How to align items in a <h:panelGrid> to the right如何将 <h:panelGrid> 中的项目向右对齐
【发布时间】：2011-04-12 11:08:57
【问题描述】：

如何将下方的所有内容对齐到最右边？

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

【问题讨论】：

标签： css jsf

【解决方案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;
}

作为一个额外的提示：在 webbrowser 中右键单击网页并选择查看源代码，然后您将更好地了解 JSF 究竟生成了什么。

【讨论】：

注意：对于 columnClasses，它们适用于 rendered 列，而不是列出的所有列。对于 Mojarra 2.0，这是在生成的 td 元素上设置任何属性的唯一方法。
您经常将“旧”帖子增强为更通用、更容易找到等。这也符合条件吗？请参阅stackoverflow.com/questions/30136972/…

【解决方案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>

【讨论】：

【解决方案3】：

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

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

td {
    text-align: right;
}

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

【讨论】：