html - 全宽 li 元素

Question

我试图让这个列表的列表元素全宽。它们上面有填充物，当您将鼠标悬停在它们上面时，填充物会变成黄色。

填充没有填满整个 ul block ，这是我希望它做的。

我尝试过使用不同的显示器并将列表元素的宽度设置为 100%，但这不起作用。

.footer-navigation {
  list-style: none;
  padding-left: 0px;
  display: inline-block;
  width: 100%;
}
.footer-navigation li {
  padding: 10px;
  width: 100%;
}
.footer-navigation a {
  padding: 10px;
  color: #000000;
}
.footer-navigation a:hover {
  padding: 10px;
  color: #ffffff;
  background-color: #fac900;
}

<ul class="footer-navigation">
  <li><a href="#">Terms &amp; Conditions</a>
  </li>
  <li><a href="#">Cookie Policy</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
</ul>

Answer 1

让你的 anchor block 水平而不是内联。您还可以添加 box-sizing，这样它们就不会伸出并超出右边缘:

.footer-navigation {
  list-style: none;
  padding-left: 0px;
  display: inline-block;
  width: 100%;
}
.footer-navigation li {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}
.footer-navigation a {
  padding: 10px;
  color: #000000;
  display: block;
}
.footer-navigation a:hover {
  padding: 10px;
  color: #ffffff;
  background-color: #fac900;
}

<ul class="footer-navigation">
  <li><a href="#">Terms &amp; Conditions</a>
  </li>
  <li><a href="#">Cookie Policy</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
</ul>