3

这无疑是一个愚蠢的错误，但我要疯了才能找到它。在下面的日历代码中，如果有事件的链接以及今天的链接是不可点击的。

请注意，我已将 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>&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>
4

8 回答 8

6

您需要将<p>和<div>标签移出<span>

<p>and<div>是块级元素， a<span>是内联元素，并且内联元素内不能有块元素。

于 2013-06-06T13:20:29.423 回答
6

一起使用position:absolute;和链接时，z-index 存在问题。为了使链接起作用，请添加较高的 z-index 值，例如，

z-index:9999999;
于 2017-10-20T10:52:57.587 回答
0

而不是跨度内的 div 使用其他 html 元素。看来这就是问题所在。如果删除这些 div，元素是可点击的。

于 2013-06-06T12:24:46.627 回答
0

据我所知，您有一些元素相互重叠。部分问题是您正在为内联元素（跨度）设置宽度。

在stackOverflow上讨论：

CSS - 跨度标记不遵守宽度

我将 display: inline-block 属性添加到您的 span 标签中，并在此处添加了一些背景颜色以作为对比：

<span style="display: inline-block;position:relative;height:400px;width:70px;">

http://jsfiddle.net/6YRRF/16/

您的所有链接现在似乎都可以正常工作。

希望这可以帮助！

于 2013-06-06T12:33:34.853 回答
0

在您的 td 日历日内向您的跨度添加一个显示块，它将起作用。

于 2013-06-06T12:28:29.013 回答
0

<span></span>如果您删除放置在其中的标签，我看到链接是可点击的<td></td>。我建议你在里面添加样式<td>而不是使用<span>.

尝试。它可能工作:)

于 2013-06-06T12:39:45.677 回答
0

You can either remove <p> tag or provide css(display: inline-block) to <p> tag.

于 2017-10-20T11:50:40.903 回答
-1

Please remove the span wrap inside td. And Yes! correct your 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>
于 2013-06-06T12:32:04.367 回答