1

是否有人可以告诉我为什么边框折叠和边框间距不适用于我的元素？

http://jsfiddle.net/7Q4Bt/177/

HTML

<form action="">
  <input type="text" class="datepicker-element checkin-date__input" />
    <p class="date-output"></p>
</form>

<form action="">
  <input type="text" class="datepicker-element checkout-date__output" />
    <p class="date-output"></p>
</form>

CSS

body {
    font: 12px sans-serif;
}
.ui-widget-header {
    border: 0;
    background: 0;
}
.datepicker-element {
    border: 2px solid #000;
    border-radius: 5px;
    padding: 10px 15px;
}
.datepicker-element:focus {
    border: 2px solid #ffd300;
    outline: none;
}
.ui-datepicker {
    border: 2px solid #d6d6d6;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #e9e6e9;
    background: #FFF;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.ui-datepicker-calendar {
    border-collapse: collapse;
    border-spacing: 0;
}
.ui-datepicker td {
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
}
.date-picker-child--highlight .ui-state-default {
    background: #ffd300;
    color: #FFF;
}

我目前正在使用 JQuery UI Datepicker

亲切的问候，

乙

4

2 回答 2

2

您遇到的问题是 Datepicker 控件中的边框位于表格单元格内的<span>or<a>元素上，而不是表格单元格本身。

如果边框在表格单元格上，那么border-collape, etc 将完全按照您的要求进行。但是因为它在内部元素上，所以折叠单元格的边框不会对您看到的边框产生任何影响。

您需要清除内部元素的边框，如下所示：

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {border:none;}

然后将其设置在表格单元格上： 

.ui-datepicker td {border:1px solid #e9e6e9;   }

在 Datepicker 文档中可能有更多“官方”的方法来涵盖所有可能的情况，但这似乎在小提琴中起作用。

希望有帮助。

于 2013-08-08T06:55:41.577 回答
0

请尝试删除padding:0for .ui-datepicker td。意味着你的新风格将是

.ui-datepicker td {
    border-collapse: collapse;
    border-spacing: 0;
}

希望这是您正在寻找的。谢谢 ：-）

于 2013-08-08T06:47:16.107 回答