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

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

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