Html 如何制作有效的 <li> 链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30913279/
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 a valid <li> link
提问by ryanr
I'm trying to make an unordered list where the list items are links, not just the text inside them. But this is not valid. When checking my code with https://validator.w3.org/checkI receive the message
我正在尝试制作一个无序列表，其中列表项是链接，而不仅仅是其中的文本。但这是无效的。使用https://validator.w3.org/check检查我的代码时，我收到消息
Element a not allowed as child of element ul in this context.
在此上下文中，元素 a 不允许作为元素 ul 的子元素。
This is the code:
这是代码：
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
ul {
list-style:none;
}
a {
text-decoration:none;
color: #212121;
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
}
#container {
padding:20px;
}
.valid {
background-color:blanchedalmond;
}
.invalid {
background-color:aquamarine;
}
.nav-item {
width:120px;
height:34px;
margin:4px;
line-height:34px;
text-align:center;
border: solid 1px #212121;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li class="valid nav-item"><a href="index.html">valid</a></li>
<a href="index.html"><li class="invalid nav-item">invalid</li></a>
</ul>
</div>
</body>
</html>
The invalid arrangement of <a><li></li></a>is what I want to achievebehavior-wise with the entire <li>element being selectable as a link.
无效的安排<a><li></li></a>是我想要实现的行为方式，整个<li>元素都可以作为链接选择。
If I want to maintain valid code what is the best way to achieve a selectable <li>?
如果我想维护有效的代码，实现可选择的最佳方法是<li>什么？
回答by Muhammet
This format is invalid
此格式无效
<a href="index.html"><li class="invalid nav-item">invalid</li></a>
Valid format is
有效格式为
<li class="invalid nav-item"><a href="index.html">valid</a></li>
As for your concern anchor filling up the space of li, little csstrick will solve it.
至于你关心的主播填补空间li，小css窍门就可以解决。
a {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
回答by Mitul
There are two way you can get the li text clickable
有两种方法可以让 li 文本可点击
1) Add onlclick event the the li like
<li onclick='window.location.href="Your Link"'>Your Text</li>
1）添加onlclick事件li喜欢
<li onclick='window.location.href="Your Link"'>Your Text</li>
2) Add a tag inside the li and add css to a tag as bellow
2) 在 li 中添加一个标签并将 css 添加到一个标签中，如下所示
<li><a href='your link'>Your Text</a></li>
li a{
display:block;
}
Second option cover inside area of li
第二个选项覆盖 li 的内部区域
回答by Mike Oram
You cannot wrap your li in an anchor, if all you want is to make everything inside your li selectable rather than just the text, you can achieve this using CSS. Remove any defualt padding from your li tags, and make your anchors display block.
您不能将 li 包裹在锚点中，如果您只想让 li 中的所有内容都可以选择而不仅仅是文本，则可以使用 CSS 来实现。从 li 标签中删除任何默认填充，并使您的锚点显示块。
li {
padding: 0;
}
a {
display: block;
width:120px;
height:34px;
}
this will force the anchor to fill the li and so making the entire thing clickable.
这将强制锚点填充 li，从而使整个事物可点击。
回答by sonam gupta
The anchor can not contain li as its child so you have to put the anchor tag inside the li element as:
锚不能包含 li 作为其子元素，因此您必须将锚标记放在 li 元素中，如下所示：
<ul>
<li class="valid nav-item"><a href="index.html">valid</a></li>
<li class="invalid nav-item"><a href="index.html">invalid</a></li>
</ul>
Just replace your ul with this.
And add the css:
只需用这个替换你的 ul。
并添加css：
li a{
display:block;
}
回答by kaushik dey
<div id="container">
<ul>
<li class="valid nav-item"><a href="index.html" title="valid">valid</a></li>
<li class="invalid nav-item"><a href="index.html" title="invalid">invalid</a></li>
</ul>
</div>
This is the syntax where u can't get error messages
这是您无法获得错误消息的语法
回答by stanze
回答by Bhojendra Rauniyar
Because you're missing to wrap a tag with li tag:
因为您缺少用 li 标签包装标签：
Replace this:
替换这个：
<ul>
<li class="valid nav-item"><a href="index.html">valid</a></li>
<a href="index.html"><li class="invalid nav-item">invalid</li></a>
</ul>
With this:
有了这个：
<ul>
<li class="valid nav-item"><a href="index.html">valid</a></li>
<li class="invalid nav-item"><a href="index.html">invalid</a></li>
</ul>
