css - 包含 和 作为可点击链接的整个 元素

Question

[已解决] 答案:终于注意到 在 标签之前关闭(检查问题中的初始 html 代码)，这就是问题的原因!感谢大家的帮助!!当您累了并尝试更改其他人的代码时，就会发生这种情况:) – dev101

---

我搜索过，我尝试过，但是这个让我很头疼。我知道如何使常规 li 元素作为 block 超链接可点击，但是当我将 标记放入 li 时，只有** div ** 内围绕 < a... > 的部分显示为链接，而不是整个 li 包装器。你能帮忙吗？

html代码

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

经过多次试验和错误，从设计的 Angular 来看，唯一可以接受的就是像这样的常规悬停突出显示(无链接功能):

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 在哪里？

I am assuming what you really want is to put the span INSIDE the anchor tag, that way it will be a part of the link. You can still manipulate the appearance of the span itself if you want since it is its own element. If you DON'T want the span inside the link, then you will have to remove the span from being inline with the link, with position absolute most likely. Otherwise the span will block the anchor tag.

If you want the entire LI to be clickable you can put padding on the anchor tag that will make it cover the dimensions of the li element. It also depends on where you want the text for the link to be positions, of course. So, let's say if your li element is 200x200, you want the text from the anchor tag to be on the top left; put padding like this...

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 中使用 anchor 标记，但这可能不如仅使用 HTML 和 CSS 有效。

Also, it is redundant in most cases to repeat attributes that are unchanged between pseudo-states. If the width and/or height does not change from the default state to the hover state, it's not necessary to put them in the hover state.