我正在使用日历应用程序,无法将日期移动到一天中所需的日期。具体来说,用日期的正方形表示,我无法使日期编号移到右上方。尝试了float:right和align-text:right而不成功。这是一个jsfiddle和代码:

的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不是我的强项,所以我将不胜感激任何建议。

最佳答案

你有没有尝试过:

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;

}

关于css - css Get元素在其他元素内向右移动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16640865/

10-12 12:54
查看更多