什麼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; 

設置，這使得靜態的尺寸，但仍是內聯。