CSS表單樣式幫助內聯dt / dd元素

Question

我需要樣式化搜索（數據過濾器）表單的幫助。 我想要的是使標簽文本正確對齊，並在標簽右側添加文本框。 但是我希望開始和結束日期的從/到標簽和文本都在同一行上，包括搜索按鈕。 我如何才能實現這種影響？

請參閱隨附的示例線框，

我正在使用http://gawibowo.com/theme/adminique/forms.html中的表單樣式。 我能夠正確顯示“選擇項目”標簽/輸入和“發件人”標簽/輸入，它在與“發件人”相同的行上顯示“收件人”標簽/輸入和按鈕。

當前HTML

<form accept-charset="UTF-8" action="http://localhost:3000/reports/report/realtime-transaction-activity" class="filter" data-remote="true" id="realtime_transaction_activity_form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="?"><input name="authenticity_token" type="hidden" value="GTpmMlHkQSkoRdBgjcVYQGJOyf6UX9brW5yzVY/MrHY="></div>
 <div class="group">
    <dl class="inline">
      <dt>
        <label class="label" for="terminals">Terminals:</label>
      </dt>
      <dd>
        <select id="terminals" multiple="multiple" name="terminals[]" width="400" style="display: none; "><option value="3417">Midland U Cafeteria - A005</option>
        <option value="3686">Midland UBookstore - A201</option></select><button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all" aria-haspopup="true" tabindex="0" style="width: 225px; "><span class="ui-icon ui-icon-triangle-2-n-s"></span><span>Select options</span></button>
      </dd>
      <dt>
        <label class="label" for="from">From:</label>
      </dt>
      <dd>
        <input class="text_field hasDatepicker" id="from" name="from" required="required" type="text">
        <div class="to">
          <label class="label" for="to">To:</label>
          <input class="text_field hasDatepicker" id="to" name="to" required="required" type="text">
          <button class="button small" data-disable-with="Please wait..." name="button" type="submit">Search</button>
          <img alt="Ajax-loader" id="ajax_loader" src="/assets/ajax-loader.gif" style="display:none">
        </div>
      </dd>

    </dl>
    <br>
  </div>
</form>

CSS（用於form / dl / dt / dd元素）

form dt {
margin-bottom: 2px;
}
form dd {
    margin-bottom: 15px;
}
form dt label {
    cursor: pointer;
    font: 11px Tahoma, sans-serif;
    font-weight: bold;
    color: #555;
}

form p {
    clear: left;
    margin-bottom: 0;
    padding: 5px 0;
    width: 100%;
}
form p label {
    display: block;
    float: left;
    cursor: pointer;
    font: 11px Tahoma, sans-serif;
    font-weight: bold;
    color: #555;
    width: 100px;
    vertical-align: middle;
    padding: 5px;
    text-align: right;
    margin-right: 10px;
}
form p small {
    display: block;
    margin: 0 10px 0 120px;
    font-size: 10px;
    color: #aaa;
}

form dl.inline dt {
    clear: both;
    width: 25%;
    float: left;
    text-align: right;
}
form dl.inline dt label {
    margin-right: 12px;
}
form dl.inline dd {
    float: left;
    width: 74%;
    margin: 0 0 15px;
}

Answer 1

嘗試浮動dd內的其他元素。

form dd input, form dd label, form dd button {float:left; }​

小提琴