[英]HTML/CSS: link not clickable
这无疑是一个愚蠢的错误,但我要疯了才能找到它。 在下面的日历代码中,如果有事件的链接以及今天的链接是不可点击的。
请注意,我已将 www.google.com 替换为超链接。 在实际应用中,它指向日历的每日视图。
如果有人能发现错误,将不胜感激。 谢谢你。
2、3、4 和 7 的链接有效,但 5、6 和 8 的链接无效。
jsfiddle 在这里。
这是与小提琴中相同的代码:
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>
是块级元素, <span>
是内联元素,并且内联元素中不能包含块元素。
当使用position:absolute;
和链接在一起,z-index存在问题。 为了使链接正常工作,请添加较高的z-index值,例如,
z-index:9999999;
代替跨度内的div使用其他html元素。 这似乎是问题所在。 如果你删除这些div,元素是可点击的..
在td calendar-day内的span中添加一个显示块,它将起作用。
据我所知,您有一些元素相互重叠。 部分问题是您在内联元素(span)上设置宽度。
这里讨论stackOverflow:
我将display:inline-block属性添加到span标签中,并添加了一些背景颜色,仅供对比:
<span style="display: inline-block;position:relative;height:400px;width:70px;">
您的所有链接现在似乎都在运行。
希望这可以帮助!
如果您删除<td></td>
放置的<span></span>
标记,我会看到链接是可点击的。 我建议你在<td>
添加样式而不是使用<span>
。
尝试。 它可能会工作:)
您可以删除<p>
标记或将<p>
css(display:inline-block)提供给<p>
标记。
对于那些没有在此处提供的答案中解决问题的人,请检查 html 元素或其父元素是否没有此 CSS 属性:
pointer-events: none;
请移除td内的跨度包装。 是的! 纠正你的CSS。
<style>
div.event {
position:relative;
vertical-align:top;
z-index:3;
top:25px;
width: 70px;
}
a.event {
position:relative;
vertical-align:top;
z-index:3;
// top:-15px;
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;
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.