Question

我正在尝试在panelGrid中对齐两个列表由于一个列表比另一个列表短，因此我将在面板和较短列表顶部之间留出空格。

我只想在面板顶部之间没有空间对齐，两者都有相同的宽度（50％，50％）

 <h:panelGrid columns="2" >
    <p:dataList value="#{disBean.productList}" var="prod" itemType="circle"> 
        <f:facet name="header">p</f:facet>
        <p:column>#{prod.name} </p:column>
        <p:column>#{prod.Version}</p:column>
    </p:dataList>
    <p:dataList value="#{disBean.custList}" var="cust" itemType="circle"> 
        <f:facet name="header">c</f:facet>
        <p:column>#{cust.name} </p:column>
        <p:column>#{cust.Version}</p:column>
    </p:dataList>   
</h:panelGrid>

我尝试使用css（不是在这个例子中），但我找不到正确的组合。

任何例子都会很棒

由于

Answer 1

您需要在vertical-align生成的top元素上将CSS <td>属性设置为<h:panelGrid>。您可以通过columnClasses属性设置它，该属性采用逗号分隔的字符串和CSS样式类名称，这些字符串应按顺序应用于每个<td>元素。

所以，这应该做，

<h:panelGrid ... columnClasses="align-top, align-top">

使用此CSS

.align-top {
    vertical-align: top;
}

在panelGrid中对齐p：dataList组件

1 个答案: