显示多个月时，jQuery Datepicker的宽度太窄

Question

我在我的jQuery日期选择器上显示了多个月，但我最近增加了字体大小（和填充）以使日历更容易阅读。现在的问题是三个日历的总宽度不够大，日历重叠。

（注意：当显示单个日历时，它仍能正常工作）

在增加字体大小之前，日历完美排列，但现在我无法弄清楚我需要更改哪个类才能使其正常工作。

我没有看到任何这些样式中的任何固定宽度值，只有百分比。我想也许改变.ui-datepicker中的宽度可以做到这一点但是没有任何区别。

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }

通过Chrome开发者工具样式检查器，我可以看到＆＃34;元素样式的宽度＆＃34;设置为51 em，但我无法更改它因为我猜它的计算，但基于什么？如何确定多个日历的总宽度？

编辑：我在这里覆盖了一些默认的jQuery UI CSS，并完成了日历大小的调整。

.ui-datepicker-trigger{position:relative;top:0px;float:left}
.ui-datepicker-buttonpane .ui-widget-content{background-color:rgba(0,0,0,0.9)}
.ui-datepicker .ui-datepicker-title{margin: 0 2.3em; line-height: 2em; text-align: center;}
.ui-datepicker .ui-datepicker-title select{font-size:1.6em; margin:2px 0; background-color:transparent;color:#000000;border-color:transparent}
.ui-datepicker .ui-datepicker-title select .ui-datepicker-month{font-size:1.6em; margin:2px 0; background-color:transparent;color:#404040;border-color:transparent}
.ui-datepicker-header{background-color:white}

div.ui-datepicker-title{background-color:white}
div.ui-datepicker{font-size:10px;background-color:black;opacity:0.75;color:white;border:1px solid transparent;box-shadow: 2px 2px 8px #888888}
div.ui-datepicker td{background-color:transparent;color:white;border:1px solid transparent}
div.ui-datepicker td a{background-color:transparent;color:white;border:1px solid transparent}

.ui-dialog{box-shadow: 0px 0px 7px rgba(0,0,0,0.5);}
.ui-dialog-content{overflow:visible !important;}
.ui-dialog-titlebar{background-color:".$primarycolour.";color:white;background-image: none;}
.ui-button{border:1px solid ".$primarycolour." !important;background:white !important;background-image:none !important;border-radius:5px}
.ui-button:hover{background:".$primarycolour." !important;color:".$primarytextcolour." !important;}

.ui-widget-content{border:1px solid ".$primarycolour.";background-image:none}
.ui-widget-header{border:1px solid ".$primarycolour.";background-image:none}

.ui-widget-content .ui-state-default{border:1px solid transparent;background-image:none;text-align:center}
.ui-widget-content .ui-state-default:hover{border:1px solid ".$quaternarycolour.";background-image:none}
.ui-widget-header .ui-state-default{border:1px solid ".$primarycolour." !important;background-image:none}
.ui-widget-header .ui-state-default{border-bottom:none !important}
.ui-state-default{border:1px solid ".$primarycolour." ;background-image:none;background-color:".$tertiarycolour."}
.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid ".$quaternarycolour.";background:".$primarycolour." url(images/ui-bg_glass_55_fbcf4b_1x400.png) 50% 50% repeat-x;font-weight:normal;color:".$primarytextcolour."}
a.ui-state-default.ui-state-highlight{color:yellow}

.ui-state-active, .ui-state-active .ui-tabs-anchor, .ui-widget-content .ui-state-active, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-active .ui-state-default {
      background-image: none;
    }

.ui-state-active .ui-tabs-anchor, .ui-widget-header .ui-state-active{background-color:white !important;color:black !important;border-color:".$primarycolour." !important}

.ui-datepicker-close{border:1px solid ".$primarycolour."background-color:white}
.ui-datepicker-close:hover{background-color:".$primarycolour.color:".$primarytextcolour."}
.ui-datepicker-current{border:1px solid ".$primarycolour.";background-color:white}
.ui-datepicker-current:hover{background-color:".$primarycolour.";color:".$primarytextcolour."}