我正在尝试制作一个无序列表，其中列表项是链接，而不仅仅是其中的文本。但这是无效的。 使用 https://validator.w3.org/check 检查我的代码时我收到消息了
Element a not allowed as child of element ul in this context.
这是代码:
<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>
<a><li></li></a>的无效排列是我想要通过整个 <li> 在行为方面实现的元素可选择作为链接。
如果我想维护有效代码，实现可选 <li> 的最佳方法是什么？ ？
最佳答案
此格式无效
<a href="index.html"><li class="invalid nav-item">invalid</li></a>
有效格式为
<li class="invalid nav-item"><a href="index.html">valid</a></li>
至于你关心的 anchor 填充 li 的空间，一点点 css 技巧将解决它。
a {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
关于html - 如何制作有效的 <li> 链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30913279/