1

我正在尝试将 astyleClass应用于 ah:panelGrid而不将其应用于其子级：

<h:panelGrid id="mainPanelGrid" columns="2" width="100%" styleClass="topAligned" >
    <p:fieldset id="fs1" legend="fs1" style="width: max-content">  
        <h:panelGrid columns="3">
            <p:outputLabel for="id1" value="#{messages.label_application}" />
            <p:selectOneMenu id="id1" required="true" value="som">
                <f:selectItem itemLabel="#{messages.label_select}" noSelectionOption="true" />  
                <f:selectItems value="#{bean.availableItems}" />
            </p:selectOneMenu>
            <p:message for="id1" />
        </h:panelGrid>             
    </p:fieldset>  

     <p:fieldset id="fs2" legend="fs2" style="width: max-content">  
         <h:panelGrid columns="3">
             <!--more fields-->     
         </h:panelGrid>  
     </p:fieldset>
</h:panelGrid>

我的topAligned css：

.topAligned td{
    vertical-align: top !important;
}

问题是我需要顶部对齐两个字段集，这与styleClass我应用的效果很好，但它也适用styleClass于所有孩子。因此，两个字段集的所有字段（outputLabel，selectOneMenu，等...）也得到顶部对齐...

我尝试了所有不同的方法来指定这个问题的顶部对齐方式，但没有成功......我也尝试查看 html 源代码，但它与所有 jsf 和 primefaces 的东西有点混淆......

如果你知道一个有效的技巧......

4

1 回答 1

2

和

.topAligned td{
    vertical-align: top !important;
}

和 JSF 生成的 HTML 输出

<table class="topAligned">
    ...
</table>

您基本上将样式应用于s 的每个 <td>元素，<table>以及嵌套<table>s 的元素。

如果您只想将样式应用于<td>parent 的直接元素<table>，那么您应该使用columnClasses属性：

<h:panelGrid ... columnClasses="topAligned,topAligned">

和

.topAligned {
    vertical-align: top;
}

这将在生成的 HTML 输出中结束，如下所示：

<table>
    <tbody>
        <tr>
            <td class="topAligned">...</td>
            <td class="topAligned">...</td>
        </tr>
    </tbody>
</table>

并且不适用于<td>嵌套<table>s 的 s。

请注意，我还删除了无意义的!important解决方法。它应该仅在您想style通过外部 CSS 样式覆盖硬编码时使用。

另请注意，此问题与 JSF 无关。JSF 在这个问题的上下文中仅仅是一个 HTML 代码生成器。在处理“plain vanilla” HTML/CSS 时，您会遇到完全相同的问题。问题更多在于缺乏对基本 HTML 和 CSS 的熟悉。在http://htmldog.com，你可以找到不错的 HTML/CSS 教程。

于 2013-11-13T13:12:52.110 回答