CSS 如何将 <h:panelGrid> 中的项目向右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3714143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align items in a <h:panelGrid> to the right
提问by curiousgeorge
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>
回答by BalusC
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:
在<h:panelGrid>渲染HTML表格。您基本上希望应用于它呈现的text-align: right;每个<td>元素。使用当前代码，最简单的方法是应用以下内容：
#authenticate table td {
text-align: right;
}
You can of course also be more specific, e.g. giving the <h:panelGrid>its own styleClassand defining a rule in CSS (which would be applied directly on the rendered HTML <table>element).
您当然也可以更具体，例如给出<h:panelGrid>自己styleClass的规则并在 CSS 中定义规则（将直接应用于呈现的 HTML<table>元素）。
<h:panelGrid styleClass="className">
with
和
.className td {
text-align: right;
}
You can also give each <td>element its own class by columnClassesattribute 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:
您还可以<td>通过columnClasses属性为每个元素赋予自己的类，该属性接受要重复应用于<td>元素的逗号分隔的 CSS 类名字符串。如果要在每个<td>元素上应用相同的类，只需指定一次：
<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 究竟生成了什么。
回答by newuserua
actually in same form i used <p:panel>and got good result. looks like ;
实际上以我使用的相同形式<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>
回答by neizan
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.
然后，所有<td>元素，包括由 JSF 生成的元素，都将采用这种格式。
