【问题标题】：UI-Bootstrap date picker, icon and label not aligning properlyUI-Bootstrap 日期选择器、图标和标签未正确对齐
【发布时间】：2016-07-03 21:34:03
【问题描述】：

我正在使用 Angular ui-bootstrap 指令，但在尝试添加标签时无法正确对齐。似乎无论我将标签放在 HTML 中的哪个位置（如输入组包装器的上方或下方），标签和图标都是对齐的，而不是文本框。我试过在这里查找它，但建议（大部分已应用）似乎从未产生任何影响。我可能在样式中遗漏了一些小细节，但我将不胜感激。我能够用我的代码的 sn-ps 复制这个问题，这里有一个 plunker 可以查看。如果您认为更多内容会有所帮助，请告诉我。

这是我的 HTML：

    <!DOCTYPE html>
      <html ng-app="AppCtrl">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
        <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
        <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
        <link href="css/bootstrap-responsive.css" rel="stylesheet">
   <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
       </head>
       <body>
         <div ng-controller="DatePickerCtrl">
           <div class="row">
              <div class="">
                 <p class="input-group">
                    <label class="control-label form-inline" for="bookingDate">Booking Date:</label>
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default calButton" ng-click="open1()">
                        <i class="glyphicon glyphicon-calendar"></i>
                      </button>
                    </span>
                    <input type="text" name="bookingDate" class="form-control datePicker" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
                 </p>
               </div>
             </div>
          </div>
        </body>
      </html>

还有我的 css（如果重要的话，我的 javascript 在 plunker 中）：

/*----------Date Picker---------*/
   .full button span {
       background-color: limegreen;
       border-radius: 32px;
       color: black;
    }

    .partially button span {
       background-color: orange;
       border-radius: 32px;
       color: black;
    }

    .label {
    float: left;
    text-align: right; 
    margin: 0 10px 0 0;
  }

  #reservationInfo input[type=text] {
  float: left;
  width: 120px; 
}

提前致谢！ :)

更新：

经过几个小时摆弄标记后，我取得了一些进展。我简化了标记并删除了包裹按钮的跨度。我让一切都正确排列，但由于某种原因，文本框出现在一切之前，我现在似乎无法解决这个问题。有谁知道可能会发生什么？下面是我更新的标记，我也更新了plunker。

<body id="reservationInfo">
  <div ng-controller="DatePickerCtrl">
    <label class="control-label" for="bookingDate">Booking Date:</label>

    <button type="button" name="bookingDate" class="btn btn-default calButton" ng-click="open1()">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
    <input type="text" class="form-control datePicker" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
  </div>
</body>

</html>

【问题讨论】：

标签： css html datepicker angular-ui-bootstrap

【解决方案1】：

我想通了，我只是使用了以下属性，它似乎可以解决问题。在弄清楚这一点上浪费了太多时间，但我想这就是生活。

display: inline-block;
vertical-align: middle;

我也更新了plunker。下面是我更新的css。

/*----------Date Picker---------*/

.full button span {
  background-color: limegreen;
  border-radius: 32px;
  color: black;
}

.partially button span {
  background-color: orange;
  border-radius: 32px;
  color: black;
}

#reservationInfo input[type=text] {
  width: 110px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  margin: -10px;
}

.calIcon {
  width: 20px;
  border-right: none;
  display: inline-block;
}

如果有人有更好的解决方案，我非常愿意看到它！

【讨论】：

我使用的是最新的 Firefox，但您的 Plunkr 中的元素不对齐 :(