如何使列表项 <li> 像 link <a>

Question

我似乎无法弄清楚如何在 <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>

Answer 1

检查这个，

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>

Answer 2

将填充添加到 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>

Answer 3

将填充添加到 a 而不是 li，为了获得最佳实践，请使用 inheritance。

例如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>

Answer 4

另一种选择是将 lis 转换为嵌套的 flex 容器：

nav{
  display: flex;
  justify-content: center;
  padding: 3rem 0rem;
}

ul{
  display: flex;
  justify-content: space-between;
  width: 40%;
}

li{
  list-style: none;
  display: flex; /* now all the content of LI will take its whole area */
}

a{
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-family: 'Fira Sans';
  letter-spacing: .2rem;
  font-size: 1.5rem;
  padding: 1rem 2rem;
  /* no need to set display since flex items are already blockified */
}


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>

如何使列表项 <li> 像 link <a>

How to make a list item <li> act like a link <a>

html

css

listitem