rya*_*anr 3 html css validation
我正在尝试创建一个无序列表,其中列表项是链接,而不仅仅是其中的文本.但这不是有效的.使用https://validator.w3.org/check检查我的代码时,我收到了消息
元素a在此上下文中不允许作为元素ul的子元素.
这是代码:
<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>什么？
Muh*_*met 14
此格式无效
<a href="index.html"><li class="invalid nav-item">invalid</li></a>
有效格式是
<li class="invalid nav-item"><a href="index.html">valid</a></li>
至于你关注的锚点填补空间li,小css技巧将解决它.
a {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
有两种方法可以让li文本可点击
1)添加像li的onlclick事件
<li onclick='window.location.href="Your Link"'>Your Text</li>
2)在li中添加一个标签,然后将css添加到标签中
<li><a href='your link'>Your Text</a></li>
li a{
display:block;
}
第二个选项涵盖了李的内部区域
你不能把你的李包裹在一个锚中,如果你想要的只是让你的李中的一切都可以选择而不仅仅是文本,你可以使用CSS实现这一点.从li标签中移除任何defualt填充,并使您的锚点显示块.
li {
padding: 0;
}
a {
display: block;
width:120px;
height:34px;
}
这将迫使锚点填充li,从而使整个东西可以点击.