HTML/CSS : link not clickable

Question

这无疑是一个愚蠢的错误，但我正在疯狂地寻找它。在下面的日历代码中，如果有事件则链接和今天的链接不可点击。

请注意，我已将超链接替换为 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>&nbsp;</p><p>&nbsp;</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>&nbsp;</p><p>&nbsp;</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>&nbsp;</p><p>&nbsp;</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>&nbsp;</p><p>&nbsp;</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>

Answer 1

您需要移动 <p>和 <div> <span> 中的标签

<p>和 <div>是 block 级元素和一个 <span>是内联元素，内联元素中不能有 block 元素。