如何使列表项<li>像链接<a>那样工作
我似乎无法弄清楚如何在<li>元素内制作一个<a>元素，因为它需要全部元素，所以当您将鼠标悬停在列表项上时，鼠标将变为可点击区域。 现在，我无法将鼠标悬停在列表项目上的文本颜色（仅当我将鼠标悬停在文本上时）并且无法单击列表项目（仅当我将鼠标悬停在文本上时）。 欢迎任何帮助！
nav{
display: flex;
justify-content: center;
padding: 3rem 0rem;
}
ul{
display: flex;
justify-content: space-between;
width: 40%;
}
li{
list-style: none;
display: inline;
padding: 1rem 2rem;
}
a{
text-decoration: none;
color: black;
text-transform: uppercase;
font-family: 'Fira Sans';
letter-spacing: .2rem;
font-size: 1.5rem;
display: block;
}
a:hover{
color: white;
}
li:hover{
color: white;
border-radius:1.5rem;
background: linear-gradient(to left, #363795, #005c97);
}<nav>
<ul>
<li><a href="./index.html">home</a></li>
<li><a href="#">activiteiten</a></li>
<li><a href="#">extra</a> </li>
</ul>
</nav> 添加填充到a ，而不是li和最佳实践的研究，使用继承 。
例如nav ul li a:hover
nav {
display: flex;
justify-content: center;
padding: 3rem 0rem;
}
nav ul {
display: flex;
justify-content: space-between;
width: 40%;
}
nav ul li {
list-style: none;
display: inline;
}
nav ul li a {
text-decoration: none;
color: black;
text-transform: uppercase;
font-family: 'Fira Sans';
letter-spacing: .2rem;
font-size: 1.5rem;
display: block;
padding: 1rem 2rem;
}
nav ul li a:hover {
color: white;
border-radius: 1.5rem;
background: linear-gradient(to left, #363795, #005c97);
}<nav>
<ul>
<li><a href="./index.html">home</a></li>
<li><a href="#">activiteiten</a></li>
<li><a href="#">extra</a> </li>
</ul>
</nav>检查这个，
nav {
display: flex;
justify-content: center;
padding: 3rem 0rem;
}
ul {
display: flex;
justify-content: space-between;
width: 40%;
}
ul li {
list-style: none;
display: inline;
}
ul li a {
text-decoration: none;
color: black;
text-transform: uppercase;
font-family: 'Fira Sans';
letter-spacing: .2rem;
font-size: 1.5rem;
display: block;
padding: 1rem 2rem;
}
ul li a:hover {
color: white;
border-radius: 1.5rem;
background: linear-gradient(to left, #363795, #005c97);
}<nav>
<ul>
<li><a href="./index.html">home</a></li>
<li><a href="#">activiteiten</a></li>
<li><a href="#">extra</a> </li>
</ul>
</nav>填充添加到a代替li ，然后只适用悬停于a -不li 。
nav {
display: flex;
justify-content: center;
padding: 3rem 0rem;
}
ul {
display: flex;
justify-content: space-between;
width: 40%;
}
li {
list-style: none;
display: inline;
}
a {
text-decoration: none;
color: black;
text-transform: uppercase;
font-family: 'Fira Sans';
letter-spacing: .2rem;
font-size: 1.5rem;
display: block;
padding: 1rem 2rem;
}
a:hover {
color: white;
color: white;
border-radius: 1.5rem;
background: linear-gradient(to left, #363795, #005c97);
}<nav>
<ul>
<li><a href="./index.html">home</a></li>
<li><a href="#">activiteiten</a></li>
<li><a href="#">extra</a> </li>
</ul>
</nav>