什么CSS标签跨度的宽度？

Question

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

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

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

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上的填充，但通常很小。

Answer 2

标签是内联的，所以他们没有预置。它们的尺寸动态适合其内容。 您可以设置

display: block; 

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

display: inline-block; 

设置，这使得静态的尺寸，但仍是内联。