1

Hello there，我刚刚创建了这个 datepicker 东西，结果非常酷，只是它在 div 下方创建了一些非常烦人且看起来很奇怪的空白，当它为空并且看起来更高时，请参阅小提琴 > http://jsfiddle.net/VtKkM/2/任何非常感谢您的帮助！

4

4 回答 4

1

它的行高和页面的字体大小可以通过

像这样将行高样式添加到您的datePicker类中：

line-height: 8px;

或更改字体大小，如：

font-size: 10px;

编辑：

并且当您从选择中选择某个值时移动，您应该将跨度设置为position: absolute;

.datePicker > div > span{
   position: absolute;
}

编辑2：

或者您可以在您的跨度中第一次设置空间值，更改<span></span>为<span>&nbsp;</span>

Edit3： 我更改了此行以在 span 标记之间添加初始空间，检查 添加 onload datepicker 的值：

$.each(picker.children(), function () {
    $(this).wrap('<div>').change(function () {
        if ($(this).hasClass('month')) {
            $(this).prev().html(months[$(this).val() - 1]);
        } else {
            $(this).prev().html($(this).val());
        }
    }).parent().prepend('<span>&nbsp;</span>');

    if ($(this).hasClass('month')) {
        $(this).prev().html(months[$(this).val()]?months[$(this).val()]:"&nbsp;");
    } else {
        $(this).prev().html($(this).val()?$(this).val():"&nbsp;");
    }
});

编辑4：

和 css 方式，您可以通过将填充样式添加到空跨度来修复它，如下所示：

.datePicker > div > span:empty{
    padding:5px;
}
于 2013-06-06T22:16:48.813 回答
1

目前还没有弄清楚问题所在，但是当跨度为空时，它似乎不喜欢它。至少就目前而言，一种解决方法是仅用空格 ( &nbsp;) 替换空白选项，这样仍然会有它为空但跨度在技术上仍然包含值的错觉。这可能不是一个永久的解决方案，但它现在可以工作。

详细说明：

var days = '<option></option>', 您的 js 的第 2行 将从 var days = '<option>&nbsp;</option>',

第 32 行将从}).parent().prepend('<span></span>');到}).parent().prepend('<span>&nbsp;</span>');

于 2013-06-06T22:43:42.753 回答
0 
.datePicker > div {
display:inline;
position:relative;
min-width: 18px;
min-height:28px;  
padding:0 5px 0 5px;
}

只需将 display:inline-block 更改为 display:inline

于 2013-06-06T22:13:13.510 回答
0

我可以通过给 .datePicker 选择 5px 的边距来解决它看起来很高的部分。

于 2013-06-06T22:20:53.670 回答