表格佈局問題

Question

我有三個下拉列表<h:selectOneMenu>和一個<p:dataTable>。我希望三個下拉列表與dataTable並排放置。就像我現在所做的那樣，三個下拉列表位於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. 裹在<h:panelGroup layout="block">的下拉菜單，它將呈現一個HTML元素<div>。然後在<h:panelGroup>和<h:dataTable>上應用CSS float:left;。

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