HTML/CSS:链接不可点击 [英] HTML/CSS: link not clickable
问题描述
这无疑是一个愚蠢的错误，但我正在疯狂地寻找它.在以下日历代码中，如果有事件的链接以及今天的链接不可点击.
请注意，我已将 www.google.com 替换为超链接.在实际应用中，它指向日历的每日视图.
如果有人能发现错误，我们将不胜感激.谢谢.
2、3、4 和 7 的链接有效，但 5、6 和 8 的链接无效.
jsfiddle 是这里.
这是与小提琴相同的代码:
CSS:
div.event {位置:相对；垂直对齐:顶部；z-index:3;顶部:25px；文字宽度:70px；}a.事件{位置:相对；垂直对齐:顶部；z-index:3;//顶部:-15px;文字宽度:70px；}a.天数{垂直对齐:顶部；背景:#999;z-索引:2；顶部:0px;填充:4px；颜色:#fff;字体粗细:粗体；宽度:18px；文字对齐:居中；浮动:右；}a.theday-number {垂直对齐:顶部；背景:#999;z-索引:2；顶部:0px;填充:4px；颜色:#fff;字体粗细:粗体；宽度:18px；文字对齐:居中；浮动:右；背景颜色:红色；}HTML:
<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" 类="天数">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" 类="天数">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" 类="day-number">5</a><div class="event">下午 6:00<br><a href="eventdetail.php?id=1438">饮料</a></div></span></td><td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" 类="theday-number">6</a><div class="event"><a href="eventdetail.php?id=1441">测试</a></div><;/span><td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" 类="天数">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" 类="day-number">8</a><div class="event">6:00 PM<br><a href="eventdetail.php?id=1419">party</a>;</div></span></td></tr>
您需要将 和
和
This is undoubtedly a stupid error, but I am going crazy trying to find it. In the following code for a calendar, links if there is an event and also links for today are not clickable.
Note I have substituted www.google.com for the hyperlink. In the actual app it points to the daily view of calendar.
Would be extremely grateful if someone could spot the error. Thank you.
Links for 2, 3, 4 and 7 work but links for 5, 6 and 8 do not work.
The jsfiddle is here.
Here is the same code as in the 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>
You need to move the <p> and <div> tags out of the <span>
<p> and <div> are block-level elements and a <span> is an inline element, and you can't have a block element inside an inline element.
这篇关于HTML/CSS:链接不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
