Angular 如何使引导ui日期选择器和时间选择器内联？

是否有一种方法可以使引导ui组件以内联方式显示，如下所示：

我尝试过各种方法，但我无法使它们都对齐。这是你的电话号码

更新：

已尝试将uib时间选择器标记从

div

更改为

span

，但这会中断日期选择器组件：

更新2: 对calrify来说，这个问题是关于这个库的：

更新3: 用相对单位更新了接受答案中提供的plunkr:

• 将最后一个

  div

  标记更改为

  span

  标记
• 添加两个新的CSS类：
  • .Button类{垂直对齐：顶部；}
  • .timeClass表：第一个子项{top:-35px；位置：relative；}
• 将按钮类添加到保存按钮的

  span

• 将时间类添加到保存时间选择器的

  span

---

至少给出完整的代码@nikhilsugandh它在Plunkri中无法理解代码，但您是否使用了display:inline block？？取而代之的是完整引导datetimepicker@尼基尔苏甘德。我已经更新了这个问题，以澄清我们正在谈论的是什么谢谢，但它似乎破坏了datepicker组件：这只是CSS风格的东西，我已经更新了答案。谢谢，但还是不行。我已经用你的建议更新了Plunkr，结果是一样的。你能修改Plunkr以便它给出正确的结果吗？你试过我提供的Plunkr了吗？它应该能工作吗？您可能忘记了第一步。您所做的错误是应用了带点的timeClass，请在应用此类的范围内删除点：(

  <div class="col-md-6">
    <p class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
       <div uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></div>
    </p>
  </div>