全宽li元素

debugcn 发表于 Dev

杰森

我试图使该列表的列表元素变为全宽。它们上面有填充物，当您将鼠标悬停在它们上时，它们的颜色为黄色。

填充没有填满整个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>

j08691

使您的锚块水平，而不是内联。您还可以添加框大小，以便它们不会伸出并超出右边缘：

.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。