我是 jQuery 的新手，正在尝试使用它。我一直在尝试使用 jQuery UI Datepicker .在大多数情况下它似乎工作正常。但是，我发现 Datepicker 的定位似乎出错了，即当父主体 CSS 指定时，它出现在屏幕的右侧而不是文本输入的正下方:
body {
margin-left: auto;
margin-right: auto;
position : relative;
width : 777px;
}
但是，从正文的 CSS 中删除 width 属性，一切正常 - 日期选择器出现在文本输入字段的正下方。
body {
margin-left: auto;
margin-right: auto;
position : relative;
}
所以看起来好像添加 width 属性导致日期选择器定位到文本区域的右侧。我查看了 firebug 中的 CSS，发现日期选择器已经选择了一些内联样式:
element.style {
left: 499.5px;
position: absolute;
top: 33px;
z-index: 1;
}
我想这是在 jQuery UI datepicker js 的内部某处创建的。
有没有人遇到过这个？如果是这样，那么我能做些什么(除了不指定正文宽度之外)来确保日期选择器出现在正确的位置吗？
完整的html如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Datepicker</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/start/jquery-ui.css" type="text/css"/>
<style type="text/css">
body {
margin-left: auto;
margin-right: auto;
position: relative;
width: 777px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#dateEntry" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
</head>
<body>
<p>Date: <input id="dateEntry" type="text"/></p>
</body>
</html>
最佳答案
你可能想考虑直接在 jqui 的选择器之后调整日期选择器
例如jQuery UI Datepicker: Align below label issue
我认为日期选择器可能出于某种原因选择了 body 的 css。
还要记住“!important”属性。如果必须，请使用它。这将覆盖任何继承的 css 规则。
例如
#thing {color:#000000 !important}
关于css - jQuery UI 日期选择器定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8448122/