如何在一條線上安排所有fieldset元素？

Question

我有一個的3個字段集組成的形式，並且我想顯示在同一行上的所有單獨的元件，這意味着：

<輸入>要<輸入> <輸入> <複選框> <複選框> <複選框>。 ..

，而不是現在的方法是：

所以基本上，我需要第一字段集的內容移動到一個單一的線。

這裏是我的HTML：

<div id="filtersDiv" > 
    <fieldset class="reservationFiltersCheckinDates"><legend>{!$Label.check_in}</legend> 
    <apex:inputField value="{!reservationSearchCriteria.Check_In__c}" 
     id="reservationSearchCheckInStart" onchange="changeValues()" 
     styleClass="ajaxableElem" /> {!$Label.to} <apex:inputField value="{!reservationSearchCriteria.Check_Out__c}" 
     id="reservationSearchCheckInEnd" onchange="changeValues()" 
     styleClass="ajaxableElem" /></fieldset> 
    <fieldset class="reservationFiltersSearch"><legend>{!$Label.nameOrReservationId}</legend> 

    <input type="text" value="{!reservationSearchText}" 
     id="reservationSearchText" onfocus="this.oldvalue = this.value;" 
     onkeyup="showAjax(this);changeValues();" /> 
    <script type="text/javascript"> 
         // have to do it here, as this change is lost of partial page refresh, and 
         // we can't add placeholder attribute directly to visualforce tags 
         j$(document).ready(function() { 
          j$("[id*='reservationSearchText']").attr('placeHolder', 'Search'); 
         });              
        </script></fieldset> 
    <fieldset class="reservationFiltersStatus"><legend>{!$Label.status}</legend> 
    <label><input type="checkbox" value="{!pendingResCheck1}" 
     id="pendResCheckID" onchange="changeValues()" checked="true" 
     class="ajaxableElem" />{!$Label.pending}</label> <label><input 
     type="checkbox" value="{!checkedInResCheck}" id="checkedInResCheckID" 
     onchange="changeValues()" checked="true" class="ajaxableElem" />{!$Label.checkedin}</label> 
    <label><input type="checkbox" value="{!cancelledResCheck}" 
     id="cancelledResCheckID" onchange="changeValues()" checked="true" 
     class="ajaxableElem" />{!$Label.canceled}</label> <label><input 
     type="checkbox" value="{!confirmResCheck}" id="confirmResCheckID" 
     onchange="changeValues()" checked="true" class="ajaxableElem" />{!$Label.confirmed}</label> 
    <label><input type="checkbox" value="{!checkedOutResCheck}" 
     id="checkedOutResCheckID" onchange="changeValues()" checked="true" 
     class="ajaxableElem" />{!$Label.checkedout}</label></fieldset> 
</div> 

CSS：

#filtersDiv 
{ 
    margin: 10px 0 5px 0 !important; 
} 
#filtersDiv fieldset 
{ 
    float: left; 
    margin-right: 10px; 
    border: none; 
} 
#filtersDiv fieldset legend 
{ 
    font-size: 14px !important; 
} 

Answer 1

你可以簡單地將所有的子元素顯示爲inline-block：

fildset > * { 
    display:inline-block; 
} 

JSFiddle example。