什么 CSS 标记跨度的宽度？答案

【问题标题】：What CSS tags the width of a span?什么 CSS 标记跨度的宽度？
【发布时间】：2011-08-24 16:13:26
【问题描述】：

我使用表格作为日历（嗯，jquery UI datepicker 是）并且每个单元格都比我预期的要大得多，特别是在宽度上。

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

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

【问题讨论】：

【解决方案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 上的填充，但它通常很小。

【讨论】：

【解决方案2】：

标签是内联的，因此它们没有预设。它们的尺寸动态地适合它们的内部内容。你可以设置

display: block;

但块显示意味着同一父节点下的下一个元素将被推入新行。大多数浏览器都支持

display: inline-block;

设置，允许静态尺寸但仍是内联的。

【讨论】：