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

This question already has answers here:

Padding for Inline Elements
                                
                                    （3个答案）
                                
                        
                        
                            Child border goes below parent one
                                
                                    （2个答案）
                                
                        
                                11天前关闭。
            
                    
我刚刚开始学习html和CSS。我在编码时遇到了这个问题。列表项的填充仅在处于悬停状态时才可见。
我希望它一直出现。

我尝试并设法产生了以下代码：

* {
  margin: 0;
  padding: 0;
}

#navbar {
  background: black;
  display: flex;
}

#g {
  display: flex;
}

#g li {
  list-style: none;
}

#g li a {
  text-decoration: none;
  color: white;
  padding: 20px;
}

#g li a:hover {
  background: red;
}

#g li:first-child {
  margin-left: 50px;
}

<nav id="navbar">
  <ul id="g">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</nav>

最佳答案

由于锚标记始终显示：默认情况下为内联，因此将<a>自身设置为适当的块容器类型，例如block或inline-block，以使其布局按预期工作。

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

关于html - 为什么我的填充仅在元素处于悬停状态时显示？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59299824/