jQuery datepicker 拉伸（布局错误）

Question

出于某种原因，我的 jQuery 日期选择器看起来像上面的那个......我似乎无法弄清楚找出如何解决这个问题。

代码（缩短）：

//References

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

//Datepicker code

<div id="datepicker" name="datepicker"></div>
<script>
    $(document).ready(function() {
        $("#datepicker").datepicker({
            altField: "#realdate",
            altFormat:"yy-mm-dd",
            dateFormat: "yy-mm-dd"
        });
    });
</script>

//Hidden field to store my date

<input type="hidden" name="realdate" value="" id="realdate">

将 div 放在脚本下不起作用。然而，它的工作原理如下：

<input type='text' id='datepicker' name='datepicker' />

这会显示一个输入字段，单击该输入字段时，会显示正确呈现的日期选择器。但我不需要输入字段，我只想要日期选择器...

编辑

好吧，看来我已经找到了作恶者：

.ui-helper-clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

来自 jquery css 。 我的问题通过删除“display: block;”得到解决 问题是，这个 css 文件位于网上。我无法将它离线放在我自己的 css 文件夹中，因为它引用了一堆图像等。有什么方法可以覆盖此类或其他东西来使我的修复工作？

Answer 1

使用更强大的选择器在您自己的样式表中复制样式定义，覆盖有问题的样式：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<style type="text/css">
    .ui-helper-clearfix::after {
        display: inline;  /* or whatever it should be */
    }
</style>

只需在文档后面添加样式定义就足以使选择器更强大。但您也可以通过添加元素名称来加强选择器：div.ui-helper-clearfix::after，以确保安全。 （假设该元素是一个 div...我不知道它到底是什么。）