更新

Question

我正在使用Angular ui-bootstrap指令，并且在尝试添加标签时无法正确对齐。似乎无论我在HTML中放置标签（如输入组包装器的上方或下方），标签和图标都排成一行，但不是文本框。我试过在这里查找，但建议（大部分应用）似乎从未产生任何影响。我可能错过了造型中的一些小细节，但我很感激任何帮助。我能够使用我的代码片段来复制问题，这里有一个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>

Answer 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;
}

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

UI-Bootstrap日期选择器，图标和标签未正确对齐

更新

1 个答案: