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>

Answer 1

<h:panelGrid>呈现HTML表格。您基本上希望在其呈现的每个text-align: right;元素上应用<td>。使用当前代码，最简单的方法是应用以下内容：

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

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

<h:panelGrid styleClass="className">

与

.className td {
    text-align: right;
}

您还可以通过<td>属性为每个columnClasses元素提供自己的类，该属性接受将在<td>元素上重复应用的逗号分隔的CSS类名字符串。如果要在每个<td>元素上应用相同的类，只需指定一次：

<h:panelGrid columnClasses="className">

与

.className {
    text-align: right;
}

作为额外提示：右键单击webbrowser中的网页并选择查看源，然后您将更好地理解JSF正在生成的内容。

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>

Answer 3

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

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

td {
    text-align: right;
}

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

如何将<h：panelgrid>中的项目与右侧</h：panelgrid>对齐

3 个答案: