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獲取元素在其他元素內移動到右邊

回答

相關問題