Question

[求助]答案：终于注意到了＆lt; / a＆gt;在＆lt;之前关闭span＆gt;标签（检查问题中的初始html代码），这就是问题的原因！感谢大家的帮助！！这种情况发生在您累了并尝试更改其他人的代码时：） - dev101

我已经搜索过，我试过了，但是这个让我很头疼。我知道如何将常规 li 元素作为块超链接进行点击，但是当我放置＆lt; li 内的span＆gt; 标记，只有＆lt;周围的部分** div **中的a ...＆gt; 显示为链接，而不是整个 li 包装。你能帮忙吗？

html代码

<li>
<a class="category" href="http://link...">link_title</a> <span>(some text)</span>
</li>

经过多次试验和错误之后，从设计的角度来看，唯一可以接受的是这样的常规悬停突出显示（没有链接功能）：

css代码

div.category ol li,div.category ul li{
    display:inline-block;
    height: 100%;
    width: 100%;
}
div.category ol li:hover,div.category ul li:hover{
    display:inline-block;
    height: 100%;
    width: 100%;
    background-color:#EEE;
}

无论我尝试什么，元素总是会在新的行或某个地方突破，只有部分可以在包装div（或ol / ul元素）中单击。有什么想法吗？

由于 dev101

编辑代码以删除div.category但仍无效：

.category ul,.category ol{
    list-style: none;
    border: none;
    margin: 0px;
}
.category ul li,.category ol li{
    display:inline-block;
    height: 100%;
    width: 100%;
}
.category ul li:hover,.category ol li:hover{
    background-color:#EEE;
}
.category ul li a,.category ul li a:visited,.category ol li a,.category ol li a:visited{
    display:block;
    height: 100%;
    width: 100%;
}
/* tried to left/right align span - still breaks into new non-clickable line */
.category span{
float:left;
}

Answer 1

我对你真正想要的东西感到有些困惑......

我想我知道你想要的是什么。但是，您的HTML与CSS不匹配。具有类别类别的div在哪里？

我假设你真正想要的是将span INSATE放在锚标签中，这样它就会成为链接的一部分。如果你愿意，你仍然可以操纵跨度本身的外观，因为它是它自己的元素。如果您不希望链接内的跨度，那么您将不得不删除与链接内联的跨度，绝对位置最有可能。否则，跨度将阻止锚标记。

如果您希望整个LI可以被点击，您可以在锚标记上添加填充，使其覆盖li元素的尺寸。当然，它还取决于您希望链接的文本位置。所以，假设您的li元素是200x200，您希望锚标记中的文本位于左上角;像这样填充......

a.category {
    padding: 0 100% 100% 0;
// percentage of 100% to cover the entire area to the right and to the bottom
}

或者你可以使用JS来使LI本身成为在html中使用锚标记的链接，但这可能不如仅仅使用HTML和CSS那么高效。

此外，在大多数情况下，重复在伪状态之间保持不变的属性是多余的。如果宽度和/或高度没有从默认状态变为悬停状态，则不必将它们置于悬停状态。

Answer 2

由于您希望将click事件绑定到li元素而不将其包含在锚标记中，我建议使用简单的jQuery click事件。它更适用于设计的演示和定制

DEMO jsFiddle

$(function() {
    $('li').css('cursor', 'pointer')

    .click(function() {
        window.location = $('a', this).attr('href');
        return false;
    });
});

包含<a href=""> and <span> as a clickable link</span></a> </li>的整个<li>元素

2 个答案: