Question

有没有人有任何指针如何修复在旁边蓝图css框架中使用jquery ui的datepicker时出现的样式问题？具体而言，具有日期的表格比其所在的容器更大（更宽）。

Answer 1

我尝试了其他答案，但他们并没有为我做这件事。在解决了几个小时的问题之后，我想出了一个适合我的解决方案（Blueprint 1.0，Jquery UI 1.8.5，在Chrome和IE中使用Smoothness，Redmond和Dark Hive主题进行测试）：

/* remove blue backgrounds - separate for TH to work in IE */
.ui-datepicker-calendar tbody tr:nth-child(even) td,  
.ui-datepicker-calendar tbody tr.even td {
  background-color:inherit;
 }
.ui-datepicker-calendar thead th {
  background-color:inherit;
 }
/* set correct line height */
.ui-datepicker-calendar tbody tr td {  
  line-height: 1.1;
}
/* (optional)  make same size as example */
.ui-datepicker { font-size: 0.9em; }

Answer 2

添加了以下CSS来解决问题：

.ui-datepicker-calendar table{
  margin: 0; }
.ui-datepicker-calendar th , .ui-datepicker-calendar td {
  padding: 0; text-align: center; }

Answer 3

感谢您的帮助。

我发现在接近默认样式之前我必须做出更多改动：

/*JQUERY-UI + BLUEPRINT CSS CALENDAR FIX*/
.ui-datepicker-calendar table{
  margin: 0; }
.ui-datepicker-calendar th , .ui-datepicker-calendar td {
  padding: 0; text-align: center; background:white; color:#333;  }
.ui-datepicker-calendar th{
  padding: 5px 0; }
.ui-datepicker-calendar td{
  padding:0 2px 2px 0; }
.ui-datepicker-calendar td a{
  padding:0 1px 0 0; }
.ui-datepicker {
  font-size:0.8em; }

Answer 4

oneBelizean走在正确的轨道上，但在我用表格对th和td选择器进行限定之前，它对我不起作用：

.ui-datepicker-calendar table{
  margin: 0; }
.ui-datepicker-calendar table th , .ui-datepicker-calendar table td {
  padding: 0; text-align: center; }

在这之后，我不需要任何额外的东西，西蒙补充。

Answer 5

我发现我必须非常具体地访问这些元素并删除一些填充。

/* JQUERY-UI + BLUEPRINT CSS CALENDAR FIX */
.ui-datepicker table{
  margin: 0; }
.ui-datepicker-calendar thead tr th , .ui-datepicker tbody tr td {
  background:white; color:#333;  }
.ui-datepicker-calendar thead tr th{
  padding: 5px 0; }
.ui-datepicker-calendar tbody td{
  padding:0 2px 2px 0; }
.ui-datepicker-calendar tbody td a{
  padding:0 1px 0 0; }
.ui-datepicker-calendar {
  font-size:0.8em; }

影响jQuery datepicker外观的蓝图CSS

5 个答案: