日期时间选择器用它的 css 弄乱输入元素答案

【问题标题】：datetime picker messing input element with it's css日期时间选择器用它的 css 弄乱输入元素
【发布时间】：2016-03-25 12:42:40
【问题描述】：

我有绑定到 jquery 日期时间选择器控件的输入元素。元素在 html 中呈现，如

<input id="DateFrom" class="form-control text-right" type="text" value="" name="DateFrom" data-val-date="The field Date From must be a date." data-val="true">

日期时间控制很好，但是当我点击日期时间选择器时出现问题，我的输入元素被其宽度缩小并且日期时间图标被向下移动了 29 像素。

在日期时间选择器上查看萤火虫，点击以下内容在 dom 中呈现

<div class="bootstrap-datetimepicker-widget dropdown-menu usetwentyfour bottom" style="display:block; top:29px; ... "> ... </div>

所以我尝试针对整个班级并使用 css 删除顶部

.bootstrap-datetimepicker-widget + .dropdown-menu + .usetwentyfour + .bottom {
    top: 0 !important;
}

但这并没有改变。

【问题讨论】：

你能滚动一个 JSfiddle 来重现你的问题吗？

标签： javascript jquery html css datetime

【解决方案1】：

所以我尝试针对整个班级并使用 css 删除顶部

.bootstrap-datetimepicker-widget + .dropdown-menu + .usetwentyfour + .bottom {
    top: 0 !important;
}

选择 .bootstrap-datetimepicker-widget -> adjacent sibling .dropdown-menu -> 相邻兄弟 -> .usetwentyfour -> 相邻兄弟 -> .bottom ，不是

<div class="bootstrap-datetimepicker-widget dropdown-menu usetwentyfour bottom" 
  style="display:block; top:29px; ... "> ... </div>

你应该可以使用选择器

div.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.bottom

或

div.bootstrap-datetimepicker-widget

【讨论】：