如何将<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>

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中的网页并选择View Source,然后您将更好地理解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>