Question

这无疑是一个愚蠢的错误，但我发疯了，试图找到它。在以下日历代码中，如果存在事件则链接，并且今天的链接也不可点击。

注意我已将www.google.com替换为超链接。在实际的应用程序中，它指向日历的日常视图。

如果有人能发现错误，我将非常感激。谢谢。

2,3,4和7的链接工作，但5,6和8的链接不起作用。

jsfiddle是here。

以下是与小提琴相同的代码：

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>是块级元素，<span>是内联元素，并且内联元素中不能包含块元素。

Answer 2

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

z-index:9999999;

Answer 3

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

Answer 4

在td calendar-day内的span中添加一个显示块，它将起作用。

Answer 5

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

在stackOverflow上讨论：

CSS - width not honored on span tag

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

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

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

您的所有链接现在似乎都在运作。

希望这有帮助！

Answer 6

如果您删除<span></span>内放置的<td></td>标记，我会看到这些链接是可点击的。我建议您在<td>内添加样式，而不是使用<span>。

尝试。它可能有效：）

Answer 7

您可以删除<p>代码或将{css（display：inline-block）提供给<p>代码。

Answer 8

请删除td内的span包裹。是的！纠正你的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>

HTML / CSS：链接无法点击

8 个答案: