Html CSS表单样式帮助内联dt/dd元素

Html CSS表单样式帮助内联dt/dd元素,html,css,Html,Css,我需要帮助样式的搜索数据过滤器形式。我想要的是标签文本右对齐,文本框位于标签的右侧。但是我希望开始和结束日期的from/to标签和文本都在同一行,包括搜索按钮。我怎样才能达到这个效果 参见随附的线框示例 我使用的是来自的表单样式。我能够正确显示“选择项目”标签/输入和“从”标签/输入,它在与我遇到问题的“从”相同的行上显示“到”标签/输入和按钮 当前html <form accept-charset="UTF-8" action="http://localhost:3000/reports

我需要帮助样式的搜索数据过滤器形式。我想要的是标签文本右对齐,文本框位于标签的右侧。但是我希望开始和结束日期的from/to标签和文本都在同一行,包括搜索按钮。我怎样才能达到这个效果

参见随附的线框示例

我使用的是来自的表单样式。我能够正确显示“选择项目”标签/输入和“从”标签/输入,它在与我遇到问题的“从”相同的行上显示“到”标签/输入和按钮

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

尝试浮动dd中的其他元素

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

你为什么在表单布局中使用定义列表?我决不反对采用不同的样式方法,使用不同的html元素,等等@j08691使用theme from,这确实是唯一的原因
form dd input, form dd label, form dd button {float:left; }​