Jsf 表格布局问题

我有三个下拉列表

，还有一个

。我希望三个下拉列表与dataTable并排。正如我现在看到的，三个下拉列表位于dataTable上方。我尝试创建更大的表，将三个下拉列表放在一列中，并将

放在另一列中，以获得并排布局，但它不起作用。这是我到目前为止得到的

        <h:selectOneMenu id="customer" value="#{DMBackingBean.customer}">
            <f:selectItem itemLabel="Select Customer" itemValue="" />
            <f:selectItems value="#{DMBackingBean.customers}"/>
            <p:ajax actionListener="#{DMBackingBean.handCustomerChange}" update="facility" event="change"/>
        </h:selectOneMenu>
        <br/><br/>
        <h:selectOneMenu id="facility" value="#{DMBackingBean.facility}">
            <f:selectItem itemLabel="Select Facility" itemValue=""/>
            <f:selectItems value="#{DMBackingBean.facilities}"/>
        </h:selectOneMenu>
        <br/><br/>
        <h:selectOneMenu id="project" value="#{DMBackingBean.project}">
            <f:selectItem itemLabel="Select Projet" itemValue=""/>
            <f:selectItems value="#{DMBackingBean.projects}"/>
        </h:selectOneMenu>
        <p:dataTable var="item" value="#{DMBackingBean.drawings}" selection="#{DMBackingBean.selectedDrawing}" selectionMode="single">
            <p:column>
                <f:facet name="header">
                    <h:outputText value="DrawingType"/>
                </f:facet>
                <h:outputText value="#{item.drawingType}"/>
            </p:column>
            ...
        </p:dataTable>

...

两种方式：

创建一个

h:panelGrid

，并将下拉列表放在一个

h:panelGroup

中。

h:panelGrid

呈现一个HTML

元素，每个子元素都在它自己的

元素中

<h:panelGrid columns="2">
     <h:panelGroup>
         <h:selectOneMenu>...</h:selectOneMenu>
         <h:selectOneMenu>...</h:selectOneMenu>
         <h:selectOneMenu>...</h:selectOneMenu>
     </h:panelGroup>
     <h:dataTable>...</h:dataTable>
</h:panelGrid>

与

---

我用了你的第一种方法。它是有效的。但是，当它为生成第二个元素时，将在单元格内对齐中心，使其看起来有趣。是否有一种方法可以使两者对齐顶部？我尝试使用

，但它无法检查生成的HTML输出。它正在应用

表上的样式，而不是
td
。给它一个类名，并在CSS中使用
.classname td{vertical align:top；}
。
 <h:panelGroup layout="block" styleClass="left">
     <h:selectOneMenu>...</h:selectOneMenu>
     <h:selectOneMenu>...</h:selectOneMenu>
     <h:selectOneMenu>...</h:selectOneMenu>
 </h:panelGroup>
 <h:dataTable styleClass="left">...</h:dataTable>

.left { float: left; }