如何将 中的项目向右对齐

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

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

The <h:panelGrid> http://download.oracle.com/docs/cd/E17802_01/j2ee/javaee/javaserverfaces/1.2_MR1/docs/tlddocs/h/panelGrid.html呈现 HTML 表格。基本上你想申请text-align: right;在每一个<td>它渲染的元素。使用当前代码，最简单的方法是应用以下内容：

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

当然，您也可以更具体，例如给予<h:panelGrid>它自己的styleClass并在 CSS 中定义规则（该规则将直接应用于渲染的 HTML<table>元素）。

<h:panelGrid styleClass="className">

with

.className td {
    text-align: right;
}

您还可以给每个<td>元素属于自己的类columnClasses属性，它接受以逗号分隔的 CSS 类名字符串，这些类名将在<td>元素。如果你想在每个应用程序上应用相同的类<td>元素，只需指定一次：

<h:panelGrid columnClasses="className">

with

.className {
    text-align: right;
}

作为额外提示：右键单击网络浏览器中的网页并选择查看源代码，那么您将更好地理解 JSF 到底生成了什么。