Html 全宽锂元素

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

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

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

.footer导航{
列表样式：无；
左侧填充：0px；
显示：内联块；
宽度：100%；
}
.footer导航li{
填充：10px；
宽度：100%；
}
.页脚导航a{
填充：10px；
颜色：#000000；
}
.页脚导航a:悬停{
填充：10px；
颜色：#ffffff；
背景色：#fac900；
}

这些

实际上占据了父级

的全部宽度，这里的问题是您正在

上应用悬停效果，它们只占据了文本的宽度

您可以通过应用
display:inline block到






这些
实际上占据了父级
的全部宽度，这里的问题是您正在
上应用悬停效果，它们只占据了文本的宽度

您可以通过应用
display:inline block到






这里的问题是，您的黄色背景显示在
a
元素上。您的'li
元素**是**100%宽度，但突出显示在
a`元素上，该元素不是100%宽度

添加以下css：

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

并删除此项：

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

工作示例：
这里的问题是，您的黄色背景显示在
a
元素上。您的'li
元素**是**100%宽度，但突出显示在
a`元素上，该元素不是100%宽度

添加以下css：

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

并删除此项：

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

工作示例：
将锚定块设置为水平，而不是内联。您还可以添加长方体大小，以便它们不会伸出并延伸到右边缘之外：


.footer导航{
列表样式：无；
左侧填充：0px；
显示：内联块；
宽度：100%；
}
.footer导航li{
填充：10px；
宽度：100%；
框大小：边框框；
}
.页脚导航a{
填充：10px；
颜色：#000000；
显示：块；
}
.页脚导航a:悬停{
填充：10px；
颜色：#ffffff；
背景色：#fac900；
}







将锚定块设置为水平，而不是内联。您还可以添加长方体大小，以便它们不会伸出并延伸到右边缘之外：


.footer导航{
列表样式：无；
左侧填充：0px；
显示：内联块；
宽度：100%；
}
.footer导航li{
填充：10px；
宽度：100%；
框大小：边框框；
}
.页脚导航a{
填充：10px；
颜色：#000000；
显示：块；
}
.页脚导航a:悬停{
填充：10px；
颜色：#ffffff；
背景色：#fac900；
}







实际上，您的填充并没有在HOWW上变为黄色。它是锚定标签。将其更改为
li:hover
以更改完整li项的颜色。这是


.footer导航{
列表样式：无；
左侧填充：0px；
显示：内联块；
宽度：100%；
}
.footer导航li{
填充：10px；
宽度：100%；
}
.页脚导航a{
填充：10px；
颜色：#000000；
}
.footer导航li:悬停{
填充：10px；
颜色：#ffffff；
背景色：#fac900；
}







实际上，您的填充并没有在HOWW上变为黄色。它是锚定标签。将其更改为
li:hover
以更改完整li项的颜色。这是


.footer导航{
列表样式：无；
左侧填充：0px；
显示：内联块；
宽度：100%；
}
.footer导航li{
填充：10px；
宽度：100%；
}
.页脚导航a{
填充：10px；
颜色：#000000；
}
.footer导航li:悬停{
填充：10px；
颜色：#ffffff；
背景色：#fac900；
}







这里的问题是您正在设置锚元素本身的样式，默认情况下，锚元素本身是一个内联元素。通过简单地将CSS:hover从针对元素更改为针对
元素，您可以获得所需的结果

以下是更改后的CSS类，以及我的意思：

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

}


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


两边都有衬垫
锁定目标时，悬停时的颜色更改丢失

下面是一个更重构的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; 
}

这里的问题是，您正在设置锚元素本身的样式，默认情况下锚元素是内联元素。通过简单地将CSS:hover从针对元素更改为针对
元素，您可以获得所需的结果

以下是更改后的CSS类，以及我的意思：

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

}


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


两边都有衬垫
锁定目标时，悬停时的颜色更改丢失

下面是一个更重构的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; 
}