棘手的造型创建空白空间

Question

Hello there，我刚创建了这个日期选择器的东西，结果非常酷，只是它在div下面创建了一些非常烦人和奇怪的白色空间，当空的时候看起来更高，看小提琴＆gt; http://jsfiddle.net/VtKkM/2/非常感谢任何帮助！

Answer 1

它的行高和你可以通过

修复它的字体大小

将线条高度样式添加到 datePicker 类，如下所示：

line-height: 8px;

或更改字体大小，如：

font-size: 10px;

修改

如果从select中选择一些值时移动，则应将跨度设置为 position：absolute;

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

<强> EDIT2：

或者您可以在您的范围内第一次设置空间值，将<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;
}

Answer 2

尚未解决问题，但似乎当跨度为空时它不喜欢它。至少就目前而言，一种解决方法是用空格（ ）替换空白选项，这样仍然存在空虚的错觉，但跨度在技术上仍然包含一个值。这可能不是一个永久的解决方案，但它现在可以使用。

详细说明：

你的js的第2行将来自 var days = '<option></option>',  至 var days = '<option>&nbsp;</option>',

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

Answer 3

.datePicker > div {
display:inline;
position:relative;
min-width: 18px;
min-height:28px;  
padding:0 5px 0 5px;
}

只需更改display：inline-block即可显示：inline

Answer 4

关于它的部分看起来很高我可以通过给予.datePicker选择5px边距来修复。