如何正確對齊datepicker文本框下方的datepicker圖標？

我有一個日期選擇器，我希望datepicker圖標出現在日期選擇器後面。但是，日期選擇器圖標出現在日期選擇器下方。我附加了一個JSFiddle。 Fiddle for datepicker 如何正確對齊datepicker文本框下方的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>

我試圖獲得在很多方面對齊文本的日期選擇器按鈕，但失敗了。我必須讓datepicker按鈕對齊到文本框。

它在JSFiddle上完美工作。但是，如果你在Chrome上運行它。您會注意到日期選擇器按鈕出現在文本框下方。如何將其與文本框對齊？下面CSS

來源

2016-01-21 Nevermore

display：inline-block; vertical-align：middle; 寬度：90％; margin：0 5px 0 0; 通過回答Shailesh works – Nevermore

添加這風格做的工作..

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

來源

2016-01-21 08:58:09 Nevermore

只是改變

.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%; 
}

來源

2016-01-21 07:57:30

你不覺得它會影響我所有的表單控件嗎？ .. 我寧願在上面的評論中提出答案。 – Nevermore

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>

來源

2016-01-21 08:31:38

如何正確對齊datepicker文本框下方的datepicker圖標？

回答

相關問題