html - 使用我的JQuery UI Datepicker，为什么图标显示在单独的行上？

我在这里有一个JSFiddle：

https://jsfiddle.net/1pm0vsf3/1/

我使用的是标准选项，即buttonImage：

https://api.jqueryui.com/datepicker/

但我的日历图标显示在新行上：



如何使我的日历图标显示在同一行上？

最佳答案

将此添加到您的CSS：

.col-10::after {
  clear: both;
  content: ' ';
  display: block;
}
input.key-event-datepicker {
  float: left;
  margin-right: 5px;
}

这将浮动添加到您的输入，从而告诉按钮它可以浮动在您的输入旁边。 col-10上的after元素清除浮点数，因此不会影响父容器的高度。
您可能仍应为col-10使用一个更唯一的标识符，因为这会立即为所有col-10添加浮动清除。
更新了JS Fiddle：https://jsfiddle.net/obmajt1w/

关于html - 使用我的JQuery UI Datepicker，为什么图标显示在单独的行上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55722028/