如何正确对齐出现在日期选择器文本框下方的日期选择器图标？答案

【问题标题】：How to align datepicker icon appearing below the datepicker textbox properly?如何正确对齐出现在日期选择器文本框下方的日期选择器图标？
【发布时间】：2016-01-21 07:52:02
【问题描述】：

我有一个日期选择器，我希望日期选择器图标出现在日期选择器之后。但是，日期选择器图标出现在日期选择器下方。我附上了一个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 上运行它。您会注意到日期选择器按钮出现在文本框下方。如何对齐文本框？

【问题讨论】：

显示：内联块；垂直对齐：中间；宽度：90%；边距：0 5px 0 0； Shailesh 作品的回答

标签： javascript jquery html css datepicker

【解决方案1】：

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>

【讨论】：

【解决方案2】：

只需在CSS下面更改

.form-control {
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #555;
  display: inline;
  font-size: 14px;
  height: 34px;
  line-height: 1.42857;
  margin-right: 10px;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s  ease-in-out 0s;
  width: 90%;
}

【讨论】：

你不认为它会影响我所有的表单控件吗？ ..我宁愿在上面的评论中提出答案。

【解决方案3】：

将其添加到样式中就可以了..

display: inline-block; 
vertical-align: middle; 
width: 90%; 
margin: 0 5px 0 0;

【讨论】：