Javascript 显示内联不工作

我正在尝试将ngTimepicker与我的angular项目集成。它确实可以工作，但我无法将ngTimepicker输入与表单输入内联。

我希望html的这一部分在一行中

index.html

添加

时间选择器
{{ctrl.time}}
{{ctrl.time2}}
var app=angular.module（'app'，['jkuri.timepicker']）；
app.controller（'Ctrl'，[function（）{
}]);

试试这样的方法

时间选择器
{{ctrl.time}}
{{ctrl.time2}}
var app=angular.module（'app'，['jkuri.timepicker']）；
app.controller（'Ctrl'，[function（）{
}]);

试试这样的方法

试试这个：

CSS

更新的

尝试以下操作：

CSS

---

更新了

您需要将显示内联块设置为ng定时器指令。因为它将自己替换为一个模板

所以你需要写一个css

---

您需要将显示内联块设置为ng timepicker指令。因为它将自己替换为一个模板

所以你需要写一个css

---

下面是一个基于您的代码的工作示例：

我基本上将css类更改为：

.inline {
    display: inline-block;
}

并将该类放入ngTimepicker指令中：

<form>
  <input class="inline"  type="text " required="true" ng-model="ctrl.taskObj.condition">
  <ng-timepicker class="inline" ng-model="ctrl.taskObj.timeStart" step="30" theme="green"></ng-timepicker>
  <ng-timepicker class="inline" ng-model="ctrl.taskObj.timeEnd" step="30" theme="green"></ng-timepicker>
  <button type="button" class="btn btn-primary" ng-click="ctrl.addTask()">Add</button>
</form>

添加

以下是一个基于您的代码的工作示例：

我基本上将css类更改为：

.inline {
    display: inline-block;
}

并将该类放入ngTimepicker指令中：

<form>
  <input class="inline"  type="text " required="true" ng-model="ctrl.taskObj.condition">
  <ng-timepicker class="inline" ng-model="ctrl.taskObj.timeStart" step="30" theme="green"></ng-timepicker>
  <ng-timepicker class="inline" ng-model="ctrl.taskObj.timeEnd" step="30" theme="green"></ng-timepicker>
  <button type="button" class="btn btn-primary" ng-click="ctrl.addTask()">Add</button>
</form>

添加

.inline {
    display: inline-block;
}

<form>
  <input class="inline"  type="text " required="true" ng-model="ctrl.taskObj.condition">
  <ng-timepicker class="inline" ng-model="ctrl.taskObj.timeStart" step="30" theme="green"></ng-timepicker>
  <ng-timepicker class="inline" ng-model="ctrl.taskObj.timeEnd" step="30" theme="green"></ng-timepicker>
  <button type="button" class="btn btn-primary" ng-click="ctrl.addTask()">Add</button>
</form>