jsf - 表格布局有问题

Question

我有三个下拉列表<h:selectOneMenu>和一个<p:dataTable>. 我希望三个下拉列表与数据表并排。正如我现在所拥有的，三个下拉列表位于数据表上方。我尝试创建更大的表格并将三个下拉列表放在一列中，然后放入<h: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>

Answer 1

两种方式：

1. 创建一个h:panelGrid并将下拉列表放在一个中h:panelGroup。h:panelGrid渲染一个 HTML元素，<table>每个子元素都在它自己的<td>元素中。

   <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>
   

2. 将下拉列表包装在 a<h:panelGroup layout="block">中，它将呈现一个 HTML<div>元素。float:left;然后在<h:panelGroup>和上应用 CSS <h:dataTable>。

    <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; }