如何通过单击 <li> 激活 HTML 链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1121748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the HTML link activated by clicking on the <li>?
提问by San
I have the following markup,
我有以下标记，
<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>
The <li>is a bit big, with a small image on its left,
I have to actually click on the <a>to activate the link.
How can I make a click on the <li>activate the link?
该<li>是有点大，在其左边的一个小图像，我必须真正在点击<a>激活链接。如何点击<li>激活链接？
Edit1:
编辑1：
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;
}
回答by MiffTheFox
#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }
It may need some tweaking for IE6, but that's about how you do it.
它可能需要对 IE6 进行一些调整，但这取决于您如何进行调整。
回答by Eric
As Marineio said, you could use the onclickattribute of the <li>to change location.href, through javascript:
正如 Marineio 所说，您可以通过 javascript使用to change的onclick属性：<li>location.href
<li onclick="location.href='http://example';"> ... </li>
Alternatively, you could remove any margins or padding in the <li>, and add a large padding to the left side of the <a>to avoid text going over the bullet.
或者，您可以删除 中的任何边距或填充<li>，并在 左侧添加一个大的填充<a>以避免文本越过项目符号。
回答by Duncan
Just to throw this option out there:
只是把这个选项扔出去：
<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>
This is the style I use in my menus, it makes the list item itself a hyperlink (similar to how one would make an image a link).
For styling, I usually apply something like this:
这是我在菜单中使用的样式，它使列表项本身成为一个超链接（类似于人们如何使图像成为链接）。
对于造型，我通常应用这样的东西：
nav ul a {
color: inherit;
text-decoration: none;
}
I can then apply whatever styling to the <li> that I wish.
然后我可以将任何样式应用到我希望的 <li> 上。
Note:Validators will complain about this method, but if you're like me and do not base your life around them, this should work just fine.
注意：验证器会抱怨这种方法，但是如果你像我一样并且不以它们为基础，这应该可以正常工作。
回答by Adam
Just add wrap the link text in a 'p' tag or something similar and add margin and padding to that element, this way it wont affect the settings that MiffTheFox gave you, i.e.
只需将链接文本添加到“p”标签或类似的东西中，并为该元素添加边距和填充，这样它就不会影响 MiffTheFox 给你的设置，即
<li> <a href="#"> <p>Link Text </p> </a> </li>
回答by DejanR
This will make whole <li>object as a link :
这将使整个<li>对象成为一个链接：
<li onclick="location.href='page.html';" style="cursor:pointer;">...</li>
回答by Mijail
jqyery this is another version with jquery a little less shorter.
assuming that the <a>element is inside de <li>element
jqyery 这是另一个版本，jquery 更短一些。假设<a>元素在 de <li>element 内
$(li).click(function(){
$(this).children().click();
});
回答by MrFlo
Or you can create an empty link at the end of your <li>:
或者你可以在你的末尾创建一个空链接<li>：
<a href="link"></a>
.menu li{position:relative;padding:0;}
.link{
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
This will create a full clickable <li>and keep your formatting on your real link.
It could be useful for <div>tag as well
这将创建一个完整的可点击<li>链接，并将您的格式保留在您的真实链接上。它也可能对<div>标记有用
回答by Sinan ünür
The following seems to work:
以下似乎有效：
ul#menu li a {
color:#696969;
display:block;
font-weight:bold;
line-height:2.8;
text-decoration:none;
width:100%;
}
回答by Marineio
You could try an "onclick" event inside the LI tag, and change the "location.href" as in javascript.
您可以在 LI 标签内尝试“onclick”事件，并像在 javascript 中一样更改“location.href”。
You could also try placing the li tags within the a tags, however this is probably not valid HTML.
您也可以尝试将 li 标签放在 a 标签中，但这可能不是有效的 HTML。
回答by rafaelsimoes85
I found a easy solution: make the tag " li "be inside the tag " a ":
我找到了一个简单的解决方案：将标签“ li ”放在标签“ a ”内：
<a href="#"><li>Something1</li></a>
