如何对齐项目 在右边

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属性为每个元素提供自己的类，该属性接受逗号分隔的CSS类名字符串，这些字符串将重复应用于这些<td>元素。如果要对每个<td>元素应用相同的类，只需指定一次即可：

<h:panelGrid columnClasses="className">

与

.className {
    text-align: right;
}

作为一个额外的提示：右键单击webbrowser中的网页，然后选择 View Source ，然后您将更好地了解JSF到底生成了什么。