HTML/CSS：链接不可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16961877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS: link not clickable
提问by user1904273
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.
请注意，我已将 www.google.com 替换为超链接。在实际应用中，它指向日历的每日视图。
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.
2、3、4 和 7 的链接有效，但 5、6 和 8 的链接无效。
The jsfiddle is here.
jsfiddle 在这里。
Here is the same code as in the fiddle:
这是与小提琴相同的代码：
CSS:
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:
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>
回答by rahool
You need to move the <p>and <div>tags out of the <span>
您需要将<p>和<div>标签移出<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.
<p>and<div>是块级元素， a<span>是内联元素，并且内联元素中不能有块元素。
回答by fuddin
When using position:absolute;and links together, there are issues with z-index. In order for the link to work, add a high z-index value,
For example,
position:absolute;一起使用和链接时，z-index 会出现问题。为了使链接正常工作，请添加一个高 z-index 值，例如，
z-index:9999999;
回答by Rinku
Instead of div within a span use other html element. It seems this is the problem. If you remove those divs, elements are clickable..
使用其他 html 元素代替跨度内的 div。看来这就是问题所在。如果删除这些 div，元素是可点击的..
回答by Stephen
Add a display block to your span inside your td calendar-day and it will work.
在您的 td 日历日内向您的跨度添加一个显示块，它将起作用。
回答by user3795373
You can either remove <p>tag or provide css(display: inline-block) to <p>tag.
您可以删除<p>标记或提供 css(display: inline-block) 来<p>标记。
回答by Sheriff_McLawDog
From what I can tell, you have some elements overlapping one another. Part of the problem is that you are setting width on an inline element (span).
据我所知，您有一些元素相互重叠。部分问题是您在内联元素（跨度）上设置宽度。
Discussed here on stackOverflow:
在 stackOverflow 上讨论：
CSS - width not honored on span tag
I added the display: inline-block property to your span tags and also added some background color just for contrast here:
我将 display: inline-block 属性添加到您的 span 标签中，并在此处添加了一些背景颜色以供对比：
<span style="display: inline-block;position:relative;height:400px;width:70px;">
All your links seem to be working now.
你所有的链接现在似乎都在工作。
Hope this helps!
希望这可以帮助！
回答by Ron Saha
I see the links are clickable if you remove the <span></span>tag which you have placed inside <td></td>. I suggest you add styling inside <td>instead of using <span>.
如果您删除<span></span>放置在里面的标签，我看到链接是可点击的<td></td>。我建议你在里面添加样式<td>而不是使用<span>.
Try. It might work :)
尝试。它可能工作:)
回答by Ashwin Hegde
Please remove the span wrap inside td. And Yes! correct your css.
请取下 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>
