如何通过点击<li>来激活HTML链接？

Question

我有以下的标记：

<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

标签有一个小图像在其左边，而它自己却显得有点过大， 我必须实际点击标签才能激活链接。 如何让

标签的点击也能激活链接呢？

ul#menu li
{
    display:block;
    list-style: none;
    background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

ul#menu li a
{

    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}

- San

Answer 1

#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

它可能需要对IE6进行一些微调，但大致就是这样做。

- MiffTheFox

---

这是我将如何处理它的方式。它会将链接扩展到 <li> 标签的大小。 - Austin Hyde

它能够工作，但是文本（链接）粘在右边框上，当我给padding-right: .5em时，<a>超出了<li>。 - San

不断调整，你会让它看起来完美的。检查负边距和填充，可能有些地方出了问题导致它崩溃了。另外，请确保没有错误的文本对齐方式：right;卡在里面。 - Curtis Tasker

我通过给<li>设置padding-right:0.5em并让<li>和<a>具有相同的背景颜色，为文本（链接）提供了正确的填充。但现在<li>右侧的0.5em区域无法点击，但这没关系。 - San

San：通过在链接本身上智能地放置填充来解决了这个问题： li { padding-top: .3em; padding-bottom: .3em; a { display: block; margin: 0px; padding-left: 10%; width: 90%; height: 100%; } } - Ari Gesher

Answer 2

就像Marineio所说，你可以使用<li>的onclick属性，通过JavaScript来改变location.href：

<li onclick="location.href='http://example';"> ... </li>

或者，您可以删除<li>中的任何边距或填充，并在<a>的左侧添加大量填充，以避免文字超过标志。

- Eric

---

你能详细说明一下吗？为什么这是一个不好的想法？ - NuclearPeon

Answer 3

只是提出另一种选择：

<ul id="menu">
    <a href="#"><li>Something1</li></a>
    <a href="#"><li>Something2</li></a>
    <a href="#"><li>Something3</li></a>
    <a href="#"><li>Something4</li></a>
</ul>

这是我在菜单中使用的样式，它会使得列表项本身成为一个超链接(类似于把一个图片变成一个链接)。
对于样式，我通常会应用类似于以下的代码：

nav ul a {
    color: inherit;
    text-decoration: none;
}

我可以对<li>应用任何样式。

注意: 验证器会抱怨这种方法，但如果你像我一样不是以它们为基础的，这个方法应该没有问题。

- Duncan

---

一个 ul 元素的子元素必须全部是 li 元素。这只是语法上的要求。根据“正确使用 ul 元素”的 Stack Overflow 答案，如果这样做会导致无效的 HTML。 - EGC

出现了一只野生的验证器。 :) - Duncan

Answer 4

只需在链接文本外部添加'p'标签或类似的元素，并为该元素添加边距和填充，这样它就不会影响MiffTheFox给您提供的设置，即：

<li> <a href="#"> <p>Link Text </p> </a> </li>

- Adam

---

这对我来说实际上是最好的。我使用了一个 <span> 并将显示设置为块状。 Span 似乎比段落更正确。无论哪种方式都能很好地工作。 - Storm Muller

Answer 5

这将使整个<li>对象成为链接：

<li onclick="location.href='page.html';"  style="cursor:pointer;">...</li>

- DejanR

Answer 6

以下方法似乎可行：

ul#menu li a {
    color:#696969;
    display:block;
    font-weight:bold;
    line-height:2.8;
    text-decoration:none;
    width:100%;
}

- Sinan Ünür

Answer 7

锚点 href 链接应用于 li：

#menu li a {
       display:block;
    }

- Khandoker Hirok

Answer 8

a {
  display: block;
  position: relative;
}

我想那就是你所需要的全部。

- Abaas Skills

Answer 9

这是另一个版本的jQuery，比较简短。 假设 <a> 元素在 <li> 元素内部。

$(li).click(function(){
    $(this).children().click();
});

- Mijail

---

这将触发一个连续的循环。因为单击子元素->也会单击父元素。 - Rocky Kev

Answer 10

或者你可以在你的 <li> 结尾创建一个空链接：

<a href="link"></a>

.menu li{position:relative;padding:0;}
.link{
     bottom: 0;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
}

这将创建一个完全可点击的<li>，并保留您真实链接的格式。它也可以用于<div>标签。

- MrFlo