如何仅将部分内容定位在 td 的右上角？答案

【问题标题】：How to position only part of the content at the top right of the td?如何仅将部分内容定位在 td 的右上角？
【发布时间】：2011-06-29 03:43:06
【问题描述】：

我有一张桌子，在td 中我有一个a 标签和class='day'。我希望class='day' 位于td 的右上角。我认为这应该像设置以下 css 一样简单：

td { position: relative;} 
.day{ position: absolute; top: 0; right: 0; }

这不正常。我这里有完整的代码：http://jsfiddle.net/Mftp7/

【问题讨论】：

【解决方案1】：

table 元素无法可靠地定位。

解决此问题的一种方法是将a 包装在另一个元素中，使其具有position: relative。

在本月的第一天看到它的实际效果 - http://jsfiddle.net/Mftp7/4/

【讨论】：

【解决方案2】：

以前没有遇到过这种情况，但它看起来像是 td 元素默认为 display:table-cell 的怪癖，这似乎无法正确听取相对定位。

作为一种解决方法，您可以将 td 的内容包装在 div 中，并改为使用 div 相对。然后你会得到想要的行为。

【讨论】：

【解决方案3】：

使用

td { 
    vertical-align: top; 
    text-align: right;
}

用于右上角的所有文本。

【讨论】：

【解决方案4】：

用桌子定位很棘手。不要使用定位，而是在表格单元格上使用vertical-align: top;，并将日期放在块级元素中，以便您可以将text-align: right 放在上面。

<td><p class="day"><a href="#">6</a></p></td>

table.calendar td, table.calendar th
  { vertical-align: top; }
p.day
{ text-align: right; }

【讨论】：