如何将<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 属性，该属性接受一串以逗号分隔的CSS类名，这些CSS类名将被重复应用于 <td> 元素。如果你想在每一个 <td> 元素，只需指定一次即可。

<h:panelGrid columnClasses="className">

用

.className {
    text-align: right;
}

---

一个额外的提示：在浏览器中右击网页，选择 查看资料，那么你就会更明白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生成的元素，将以这种方式格式化。