css获取元素在其他元素内移动到右边

我正在使用日历应用程序，并且无法在一天之内获取移动日期的位置。具体来说，在日期的正方形中，我无法将日数移到右上角。尝试过float：right和align-text：没有成功。这里是一个jsfiddle，代码：css获取元素在其他元素内移动到右边

CSS

table.calendar { 
    table-layout: fixed; 
    width: 520px; 
} 
span.day-number { 
    vertical-align:top; 
// text-aligh:right; 
    background:#999; 
    z-index:2; 
    top:0px; 
    align-right:+70px; 
    padding:4px; 
    color:#fff; 
    font-weight:bold; 
    width:18px; 
    text-align:center; 
} 
td.calendar-day, td.calendar-day-np { 
// float:left; 
    vertical-align:top; 
    width:70px; 
    padding:5px 25px 5px 5px; 
    border-bottom:1px solid #999; 
    border-right:1px solid #999; 
} 
div.event { 
    display:inline; 
    position:relative; 
    z-index:3; 
    top:15px; 
    text-width: 70px; 
}

HTML

<table class="calendar"> 
    <tr> 
     <td>Mon</td> 
     <td>Tue</td> 
     <td>Wed</td> 
     <td>Thur</td> 
     <td>Fri</td> 
</tr> 
<tr> 
     <td class="calendar-day"><span class="day-number">14</span><p>&nbsp;</p><p>&nbsp;</p></td> 
    <td class="calendar-day"><span class="day-number">15</span><div>&nbsp;</div>&nbsp;</td> 
<td class="calendar-day"><span class="day-number">16</span><div class="event">4:00PM<br>Go to gym</div></td> 
    <td class="calendar-day"></td> 
    <td class="calendar-day"><span class="day-number">18</span><p>&nbsp;</p><p>&nbsp;</p></td> 
      </tr></table>

CSS不是我的套件，所以我将不胜感激的任何建议。

来源

2013-05-20 user1904273

'浮动：right'上'·天，number'为我工作。你试过哪个元素？ – mash

在我的浏览器（Firefox）上大约60％的标记处将其移动一点，但我希望它与右边的线齐平，因此它位于右上角。它是否会一直移动到浏览器的右侧？ – user1904273

你试过：

http://jsfiddle.net/sanpopo/byRTn/

table.calendar { 
    table-layout: fixed; 
    width: 520px; 
} 
span.day-number { 
    vertical-align:top; 
    background:#999; 
    z-index:2; 
    top:0px;  
    padding:4px; 
    color:#fff; 
    font-weight:bold; 
    width:18px; 
    text-align:center; 
    float:right; 
} 
td.calendar-day, td.calendar-day-np { 
// float:left; 
    vertical-align:top; 
    width:70px; 
    border-bottom:1px solid #999; 
    border-right:1px solid #999; 

} 
div.event { 
    display:inline; 
    position:relative; 
    z-index:3; 
    top:30px; 
    text-width: 70px; 

}

来源

2013-05-20 00:26:22 Popo

添加以下在你的CSS。

span.day-number { 
display:block; 
float:right; 
... 
} 

div.event { 
display:inline; /* remove this line */ 
clear:right; 
... 
}

更新填充：

td.calendar-day, td.calendar-day-np { 
padding:5px 5px 5px 5px; 
...

}

来源

2013-05-20 00:42:26 Maujor

css获取元素在其他元素内移动到右边

回答

相关问题