如何在一行上排列所有fieldset元素？

Question

我有一个由3个字段集组成的表单，我希望在同一行显示所有单个元素，这意味着：

＆LT;输入＆GT;至＆lt;输入＆gt; ＆LT;输入＆GT; ＆LT;复选框＆GT; ＆LT;复选框＆GT; ＆LT;复选框＆GT; ...

而不是现在的方式：

基本上，我需要将第一个字段集的内容移动到一行。

这是我的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