CSS JSF panelgrid 对齐到顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6834267/
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
JSF panelgrid alignment to top
提问by user644745
I see there are some answers posted for this. tried almost all of them with several permutation-combination.. but nothing seems to be working.
我看到为此发布了一些答案。用几种排列组合尝试了几乎所有这些……但似乎没有任何效果。
components inside panelgris are always middle aligned, instead of top.
panelgris 内的组件总是居中对齐，而不是顶部对齐。
tried whatever they said in the below post. How to control alignment of DataTable inside of a PanelGrid?
尝试了他们在下面的帖子中所说的任何内容。 如何控制 PanelGrid 内 DataTable 的对齐方式？
Please let me know if there is a remedy.
请让我知道是否有补救措施。
回答by BalusC
The <h:panelGrid>renders a HTML <table>element. The vertical alignment of a table cell <td>defaults indeed to middle. You want to make it to be topinstead. This is easy with CSS.
将<h:panelGrid>呈现一个HTML<table>元素。表格单元格的垂直对齐方式<td>确实默认为middle。你想让它变成top。这很容易使用 CSS。
<h:panelGrid styleClass="foo">
with
和
.foo td {
vertical-align: top;
}
If you have a table inside the panelgrid for which you'd like to keep the default table cell vertical alignment of middle, then you need to alter the CSS as follows:
如果您在面板网格中有一个表格，您希望将默认表格单元格垂直对齐保持在中间，那么您需要按如下方式更改 CSS：
.foo>tbody>tr>td {
vertical-align: top;
}
so that only the panelgrid's own table cells are top aligned.
这样只有面板网格自己的表格单元格是顶部对齐的。
To learn all about CSS, check http://www.csstutorial.net.
要了解有关 CSS 的所有信息，请查看http://www.csstutorial.net。
回答by Kevin Rahe
Use the panelGrid's columnClassesattribute to identify a CSS class that includes the vertical-align: top;style:
使用panelGrid'scolumnClasses属性来标识包含vertical-align: top;样式的 CSS 类：
<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>
and the CSS file:
和 CSS 文件：
.topAligned {
vertical-align: top;
}
The contents of the first column in the panelGrid will then be top-aligned within their cells.
然后，panelGrid 中第一列的内容将在其单元格中顶部对齐。
回答by user2462171
Use the styleClass for the panelGrid as in the following example code:
将 styleClass 用于 panelGrid，如以下示例代码所示：
<h:panelGrid columns="2" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" />
</h:panelGrid>
Then in the css configure as follows:
然后在css中配置如下：
.top-aligned-columns td{
vertical-align: top;
}
With this method you will be able to not only top-align the rows but you can also apply the same styleClass to other panelGrids within the encompassing panelGrid.
使用此方法，您不仅可以将行顶部对齐，还可以将相同的 styleClass 应用到包含的 panelGrid 中的其他 panelGrid。
For example:
例如：
<h:panelGrid columns="3" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:panel id="pnlApplicant" header="#{resources['ApplicantHeader']}" styleClass="no-border">
<h:panelGrid columns="2" cellpadding="5" style="display:block" cellspacing="5" styleClass="top-aligned-columns">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" >
<p:ajax event="change" process="@this" update="tvQuickScore"/>
</p:inputText>
<p:outputLabel value="#{resources['Name']}" />
<p:inputText id="txtFirstname" value="#{applicantBean.personal.firstName}" />
<p:outputLabel value="#{resources['Surname']}" />
<p:inputText id="txtSurname" value="#{applicantBean.personal.lastName}" />
</h:panelGrid>
</p:panel>
</h:panelGrid>
</p:panel>
