css - 什么 CSS 标记跨度的宽度？

Question

我将表格用作日历(好吧，jquery UI datepicker 就是这样)并且每个单元格都比我预期的要大得多，特别是在宽度方面。

每个带有日期的 td 大约是组成一天的实际字符的两倍宽。所有这些都是 td 中的一个 span 标签。在使用 Firebug 进行调查时，跨度的基本尺寸中有这个额外的宽度。没有填充，边距，边框影响它。

什么 CSS 定义了我的 span 的宽度？它不应该拥抱它包含的文本吗？

Answer 1

jQuery-UI 日期选择器中的单元格通常如下所示:

<td><span>X</span></td>
<td><a>X</a></td>

样式表包含类似这样的内容(数字中可能有特定于主题的变化):

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: .2em;
    /* ... */
}

所以 <span>和 <a>设置为 display: block在表格单元格内并给予一些填充(在本例中为 0.2em)。填充是您额外宽度的来源；还有，display:block将使它们足够宽以填充它们的父级，这样一列中的所有单元格将正确排列。

因此请调整您的主题或覆盖 .ui-datepicker td span和 .ui-datepicker td a CSS 使用较少的填充。您可能想看看 .ui-datepicker td 上的填充也有，但通常很小。