我在设置 jQuery 滑块并确保它与我的其他元素很好地对齐时遇到问题(当涉及到垂直和水平的间距/定位以保持一致性时)。此外,它现在只是显示为 [object object]。关于如何解决这个问题的任何想法?到目前为止,这是我的代码:http: //jsfiddle.net/dhExk/1/
HTML
<div style="padding-top: 10px; text-align: center; font-size: 12px;">
<div align="left" style="padding-bottom: 20px">
<div style="padding-bottom: 10px">
<div style="padding-bottom: 10px; font-size: 16px">Search By:</div>
<div style="padding-bottom: 10px;">
<div class="modal_field2">Park:</div>
<select>
<option selected="selected">Any</option>
</select>
</div>
<div class="modal_field2">Building:</div>
<select>
<option selected="selected">Any</option>
</select>
</div>
<div class="modal_field2">Room Type:</div>
<select>
<option selected="selected">Any</option>
</select>
</div>
<div class="modal_field2" style="text-align: left">No of Students:</div>
<div style="display: inline-block; padding-bottom: 20px; float: right">
<input type="text" id="amount" style="border: 0; color: #000; background-color: #fff; font-size: 12px;" disabled="disabled"/>
</div>
</div>
CSS
.modal_field2 {
width: 100px;
float: left;
padding-top: 3px;
}
JS
$(function() {
$("#slider").slider({
value: 50,
min: 20,
max: 400,
step: 10,
slide: function(event, ui) {
$("#amount").val("" + ui.value);
}
});
$("#amount").val("" + $("#slider").slider("value"));
});