这无疑是一个愚蠢的错误,但我正在疯狂地寻找它。在下面的日历代码中,如果有事件则链接和今天的链接不可点击。
请注意,我已将超链接替换为 www.google.com。在实际应用中它指向日历的每日 View 。
如果有人能发现错误,将不胜感激。谢谢。
2、3、4 和 7 的链接有效,但 5、6 和 8 的链接无效。
jsfiddle 是 here .
这是与 fiddle 中相同的代码:
CSS:
div.event {
position:relative;
vertical-aligh:top;
z-index:3;
top:25px;
text-width: 70px;
}
a.event {
position:relative;
vertical-align:top;
z-index:3;
// top:-15px;
text-width: 70px;
}
a.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;
}
a.theday-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;
background-color:red;
}
HTML:
<table>
<tr class="calendar-row"><td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">2</a><p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">3</a><p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">4</a><p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">5</a><div class="event">6:00 PM<br><a href="eventdetail.php?id=1438">drinks</a></div></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="theday-number">6</a><div class="event"><a href="eventdetail.php?id=1441">Test</a></div></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">7</a><p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">8</a><div class="event">6:00 PM<br><a href="eventdetail.php?id=1419">party</a></div></span></td>
</tr>
</table>
最佳答案
您需要移动 <p>
和 <div>
<span>
中的标签
<p>
和 <div>
是 block 级元素和一个 <span>
是内联元素,内联元素中不能有 block 元素。
关于HTML/CSS : link not clickable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16961877/