Question

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

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

亲切的问候，

乙

Answer 1

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

如果边框位于表格单元格上，那么border-collape等就会完成您正在尝试的操作。但由于它位于内部元素上，因此折叠单元格的边框对您看到的边框没有任何影响。

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

.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文档中可能有更多的“官方”方式来涵盖所有可能的情况，但这似乎适用于小提琴。

希望有所帮助。

Answer 2

请尝试删除padding:0 .ui-datepicker的{{1}}。意味着你的新风格是

td

希望这就是你要找的东西。谢谢： - ）

Border-Spacing和Border-Collapse无法正常工作

2 个答案: