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

Posted 2021-03-26

我有一个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/