我有一个日期选择器，我希望日期选择器图标紧跟在日期选择器之后。但是，日期选择器图标出现在日期选择器下方。我附上了一个 JSFiddle。 Fiddle for datepicker
$(document).ready(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
dateFormat: 'dd/mm/yy',
maxDate: 0
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<form>
<div class="row">
<div class="form-group col-md-1">
<label>DOB :</label>
</div>
<div class="form-group col-md-3">
<input class="form-control" name="dob" value="" id="datepicker" type="text">
</div>
</div>
</form>
</body>我尝试以多种方式让日期选择器按钮与文本框对齐，但都失败了。我必须让日期选择器按钮与文本框对齐。
它在 JSFiddle 上完美运行。但是，如果您在 Chrome 上运行它。您会注意到日期选择器按钮出现在文本框下方。如何将其与文本框对齐？
最佳答案
input.hasDatepicker {
display: inline-block;
margin-right: 5px;
width: -webkit-calc(100% - 21px);
width: -moz-calc(100% - 21px);
width: -o-calc(100% - 21px);
width: -ms-calc(100% - 21px);
width: calc(100% - 21px);
}
添加上面的css
$(document).ready(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
dateFormat: 'dd/mm/yy',
maxDate: 0
});
});input.hasDatepicker {
display: inline-block;
margin-right: 5px;
width: -webkit-calc(100% - 21px);
width: -moz-calc(100% - 21px);
width: -o-calc(100% - 21px);
width: -ms-calc(100% - 21px);
width: calc(100% - 21px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<form>
<div class="row">
<div class="form-group col-md-1">
<label>DOB :</label>
</div>
<div class="form-group col-md-3">
<input class="form-control" name="dob" value="" id="datepicker" type="text">
</div>
</div>
</form>
</body>关于javascript - 如何正确对齐出现在日期选择器文本框下方的日期选择器图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34918122/