如何制作列表项<li>就像一个链接<a>

Question

I can't seem to figure out how you make an <a> inside a <li> element act like it takes the full element, so when you actually hover over the list item your mouse changes to a clickable region. Now i'm unable to change the text-color on hover over the list-item (only when I hover over the text) and unable to click on the list item (again only when I hover over the text). Any help is welcome!

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

检查这个，

＆＃13;

＆＃13;

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);
}

＆＃13;

<nav>
  <ul>
    <li><a href="./index.html">home</a></li>
    <li><a href="#">activiteiten</a></li>
    <li><a href="#">extra</a> </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

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。

e.g。 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

另一种选择是将li转换为嵌套的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>