css 获取元素在其他元素中向右移动答案

【问题标题】：css Get element to move to right within other elementcss 获取元素在其他元素中向右移动
【发布时间】：2013-05-14 12:00:19
【问题描述】：

我正在开发一个日历应用程序，但无法在一天内将日期移动到我想要的位置。具体来说，对于日期的正方形，我无法将日期编号移动到右上角。尝试过 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 不是我的强项，因此我将不胜感激。

【问题讨论】：

float:right on .day-number 为我工作。你试了哪个元素？
这会在我的浏览器 (Firefox) 上大约 60% 标记处向右移动一点，但我希望它与右侧的行齐平，因此它位于右上角.它会在浏览器上一直向右移动吗？

标签： css rights

【解决方案1】：

你试过了吗：

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;

}

【讨论】：

【解决方案2】：

在您的 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; 
...

}

【讨论】：