使用我的 JQuery UI 日期选择器，为什么图标出现在单独的一行上？

Question

我这里有一个 JSFiddle：

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

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

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

但是我的日历图标换行了：

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

Answer 1

将此添加到您的 CSS：

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

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

使用我的 JQuery UI 日期选择器，为什么图标出现在单独的一行上？

With my JQuery UI Datepicker, why does the icon appear on a separate line?

html

css

jquery-ui

datepicker