我正在使用日历应用程序,无法将日期移动到一天中所需的日期。具体来说,用日期的正方形表示,我无法使日期编号移到右上方。尝试了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> </p><p> </p></td>
<td class="calendar-day"><span class="day-number">15</span><div> </div> </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> </p><p> </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/