CSS形式造型幫助直列DT/DD元件

我需要幫助造型一個搜索（數據過濾器）的形式。我想要的是將標籤文本右對齊，並將文本框放在標籤的右側。但我想從的/到標籤&文本的開始&結束日期都在同一行，包括搜索按鈕。我怎樣才能做到這一點？CSS形式造型幫助直列DT/DD元件

見附件樣品線框， search mockup

我使用從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（對於形式/ 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; 
}

來源

2012-03-01 Jared Knipp

爲什麼您使用的表單佈局的定義列表？ – j08691 2012-03-01 17:03:28

我絕不反對採取不同的造型手段的方法，使用不同的HTML元素等 – 2012-03-01 17:05:06

@ j08691使用主題從http://gawibowo.com/theme/adminique/forms.html，那是真正的唯一原因 – 2012-03-01 17:14:56

嘗試浮動屬於DD內的其它元素。

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

fiddle

來源

2012-03-01 17:14:52 Zac

CSS形式造型幫助直列DT/DD元件

回答

相關問題