如何将中的项目对齐到右侧

How would I align everything in my below to the far right?

我如何将下面的所有内容与最右边的内容对齐?

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

3 个解决方案

#1

The <h:panelGrid> renders a HTML table. You basically want to apply text-align: right; on every <td> element it renders. With the current code, easiest would be to apply the following:

呈现HTML表格。你基本上想要应用text-align:right;在它呈现的每个元素上。使用当前代码,最简单的方法是应用以下代码:

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

---

You can of course also be more specific, e.g. giving the <h:panelGrid> its own styleClass and defining a rule in CSS (which would be applied directly on the rendered HTML <table> element).

你当然也可以更具体,例如给 它自己的styleClass并在CSS中定义一个规则(它将直接应用于呈现的HTML

元素)。

<h:panelGrid styleClass="className">

with

.className td {
    text-align: right;
}

---

You can also give each <td> element its own class by columnClasses attribute which accepts a commaseparated string of CSS classnames which are to be applied repeatedly on the <td> elements. If you want to apply the same class on every <td> element, just specify it once:

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

<h:panelGrid columnClasses="className">

with

.className {
    text-align: right;
}

---

As an extra hint: rightclick the webpage in webbrowser and choose View Source, then you'll understand better what JSF is all exactly generating.

作为额外提示:右键单击webbrowser中的网页并选择View Source,然后您将更好地理解JSF正在生成的内容。

#2

actually in same form i used <p:panel> and got good result. looks like ;

实际上我使用 以相同的形式获得了良好的结果。好像 ;

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

#3

A little late, but might help someone, as it was what I needed...

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

If the alignment is not limited to this specific table, but rather the default format for all table cells, then just add this to your CSS file:

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

td {
    text-align: right;
}

Then, all <td> elements, including those generated by JSF, will be formatted that way.

然后,所有元素(包括由JSF生成的元素)将以这种方式进行格式化。