Html 为什么我的填充仅在元素处于悬停状态时显示？

我刚刚开始学习html和css。我在编写代码时遇到了这个问题。列表项的填充仅在处于悬停状态时可见。 我希望它一直出现

我已尝试并成功生成以下代码：

*{
保证金：0；
填充：0；
}
#导航栏{
背景：黑色；
显示器：flex；
}
#g{
显示器：flex；
}
#李国荣{
列表样式：无；
}
#李嘉庚{
文字装饰：无；
颜色：白色；
填充：20px；
}
#g:悬停{
背景：红色；
}
#李庚：第一个孩子{
左边距：50像素；
}

由于锚定标记始终显示为：inline默认情况下，将

自身设置为适当的块容器类型，如块或inline块，以使其布局按预期工作

#g li a {
display: inline-block;
}

---

由于锚定标记始终显示为：inline默认情况下，请将

自身设置为适当的块容器类型，例如块或inline块，以使其布局按预期工作

#g li a {
display: inline-block;
}

---

尝试使用display:flex；属性添加到您的nchor标记：

*{
保证金：0；
填充：0；
}
#导航栏{
背景：黑色；
显示器：flex；
}
#g{
显示器：flex；
}
#李国荣{
列表样式：无；
}
#李嘉庚{
文字装饰：无；
颜色：白色；
填充：20px；
显示器：flex；
}
#g:悬停{
背景：红色；
}
#李庚：第一个孩子{
左边距：50像素；
}

尝试使用display:flex；属性添加到您的nchor标记：

*{
保证金：0；
填充：0；
}
#导航栏{
背景：黑色；
显示器：flex；
}
#g{
显示器：flex；
}
#李国荣{
列表样式：无；
}
#李嘉庚{
文字装饰：无；
颜色：白色；
填充：20px；
显示器：flex；
}
#g:悬停{
背景：红色；
}
#李庚：第一个孩子{
左边距：50像素；
}

等等你的问题

为什么我的填充仅在元素处于悬停状态时显示

因为您故意将背景设置为仅在处于悬停状态时显示：

#glia:悬停{
背景：红色；
}

但是，如果您的问题是为什么它看起来如此奇怪，为什么它不将顶部和底部边框推开，那么因为您设置的

填充

是

a

标记，它是

display:inline

（默认情况下），您看到的是display:inline元素的默认行为。根据：

与

display:inline

相比，主要区别在于

display:inline block

允许在元素上设置宽度和高度

另外，对于

显示：内联块

，

顶部和底部的

页边距/填充是受尊重的，但是对于

显示：内联

则不受尊重

请尝试下面的示例，查看

显示：内联

、

显示：内联块

和

显示：块

之间的区别：

span.a{
显示：inline；/*范围的默认值*/
宽度：100px；
高度：100px；
填充：15px；
边框：1px纯蓝色；
背景颜色：黄色；
}
跨度b{
显示：内联块；
宽度：100px；
高度：100px；
填充：15px；
边框：1px纯蓝色；
背景颜色：黄色；
}
span.c{
显示：块；
宽度：100px；
高度：100px；
填充：15px；
边框：1px纯蓝色；
背景颜色：黄色；
}

显示：内联
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭是权杖，精英们坐在那里。阿利奎姆·埃拉特·帕特。妊娠期静脉曲张。在拉奥里特的葡萄园里。
显示：内联块
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭是权杖，精英们坐在那里。阿利奎姆·埃拉特·帕特。妊娠期静脉曲张。在拉奥里特的葡萄园里。
显示：块
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭是权杖，精英们坐在那里。阿利奎姆·埃拉特·帕特。妊娠期静脉曲张。在拉奥里特的葡萄园里等等，你在问什么

为什么我的填充仅在元素处于悬停状态时显示

因为您故意将背景设置为仅在处于悬停状态时显示：

#glia:悬停{
背景：红色；
}

但是，如果您的问题是为什么它看起来如此奇怪，为什么它不将顶部和底部边框推开，那么因为您设置的
填充
是
a
标记，它是
display:inline
（默认情况下），您看到的是display:inline元素的默认行为。根据：

与
display:inline
相比，主要区别在于
display:inline block
允许在元素上设置宽度和高度

另外，对于
显示：内联块
，
顶部和底部的
页边距/填充是受尊重的，但是对于
显示：内联
则不受尊重

请尝试下面的示例，查看
显示：内联
、
显示：内联块
和
显示：块
之间的区别：
span.a{
显示：inline；/*范围的默认值*/
宽度：100px；
高度：100px；
填充：15px；
边框：1px纯蓝色；
背景颜色：黄色；
}
跨度b{
显示：内联块；
宽度：100px；
高度：100px；
填充：15px；
边框：1px纯蓝色；
背景颜色：黄色；
}
span.c{
显示：块；
宽度：100px；
高度：100px；
填充：15px；
边框：1px纯蓝色；
背景颜色：黄色；
}
显示：内联
Lorem ipsum dolor sit amet，是一位杰出的献身者。背心