全宽 li 元素

Question

我正在尝试使此列表的列表元素全宽。他们有填充，当你悬停在它们上面时，填充是黄色的。

填充没有填满整个 ul 块，这正是我想要它做的。

我曾尝试使用不同的显示器并使列表元素的宽度为 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

使您的锚块级别而不是内联。您还可以添加 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>