Question

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

填充不会填满整个ul块，这是我想要的。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

使你的锚点阻止而不是内联。你也可以添加盒子大小，这样他们就不会捅出并超出右边缘：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

实际上，在hovw上，填充不会将颜色更改为黄色。它是锚标记。将其更改为li:hover以更改完整li项目的颜色。这是fiddle

.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 li: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 3

<li>实际上占据了父<ul>的全宽，这里的问题是您在<a>内的<li>链接上应用了悬停效果不是<li>本身。 <a>是inline elements，只占用文字的宽度。

您可以通过将display: inline-block;应用于<a>来解决此问题。

＆＃13;

.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;
  width: 100%;
  display: inline-block;
}
.footer-navigation a:hover {
  color: #ffffff;
  background-color: #fac900;
}

＆＃13;

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

＆＃13;

Answer 4

此处的问题是您在a元素上显示黄色背景。您的element **is** 100% width, but the highlight is showing on the a`元素，不是100％宽度。

添加此css：

.footer-navigation li:hover {
    color: #ffffff;
    background-color: #fac900;
}

并删除此内容：

.footer-navigation li:hover {
    color: #ffffff;
    background-color: #fac900;
}

工作示例：https://jsfiddle.net/mspinks/vj04zs2g/

Answer 5

这里的问题是你正在设置锚元素本身的样式，默认情况下是一个内联元素。只需更改您的CSS：从定位元素悬停到定位

元素，即可获得所需的结果。

这是改变后的CSS类，以及我的意思：

.footer-navigation li:hover {
padding: 10px; 
color: #ffffff;
background-color: #fac900;

}

https://jsfiddle.net/69ywk05b/

还可以进行其他改进，例如：

两者都填充
定位时，悬停时的颜色变化会丢失

这是你的css的更重构版本：

.footer-navigation {
list-style: none;
padding-left: 0px;
}

.footer-navigation li {
    padding: 15px;
}

.footer-navigation a {
    color: #000000;
}
.footer-navigation li:hover {
    background-color: #fac900;
}

.footer-navigation li:hover a {
    color: #ffffff; 
}

全宽li元素

5 个答案: