0
検索(データフィルタ)フォームのスタイリングが必要です。私がしたいのは、ラベルのテキストを右揃えにし、テキストボックスをラベルの右側に置くことです。しかし、私は、検索ボタンを含めて、&の開始/終了ラベル&の終了日をすべて同じ行に表示するようにします。この影響をどのように達成できますか?CSSフォームスタイリングヘルプインラインdt/dd要素
は私がhttp://gawibowo.com/theme/adminique/forms.htmlからフォームのスタイルを使用しています付属のサンプルワイヤーフレーム、
を参照してください。 'Select Items'ラベル/入力& 'From'ラベル/入力ディスプレイが正しく表示されます。 'To'ラベル/入力とボタンが 'From'と同じ行に表示されています。 。
現在の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;
}
なぜあなたは、フォームレイアウトの定義リストを使用していますか? – j08691
私は他のHTML要素などを使って、異なるスタイリングのアプローチをとることに決して反対していません。 –
@ j08691 http://gawibowo.com/theme/adminique/forms.htmlのテーマを使用して、それが本当に唯一の理由です –