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

标签 html css

<分区>

我刚开始学习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>

最佳答案

因为 anchor 标签总是显示:默认内联,设置<a>将其自身转换为适当的 block 容器类型,例如 block 或内联 block ,以使其布局按预期工作。

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

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

相关文章:

javascript - 检查 span 元素是否包含超过 3 行

html - 为什么 DIV 中的 SPAN 不可点击

html - 如何为 Weather.com 等拼写错误的文本设置样式(虚线下划线而不是波浪线)

css - 带有 Z-index 的 Chrome Css 错误

html - 并排显示三个图像

html - 在 angular 6 应用程序中的 ngFor 指令内自动将 Div 推到右边

html - Edge 仅打印第一页内容并删除 Bootstrap 修复它

文本框下方的 HTML 边框

CSS 宽度被忽略

html - 阻止浏览器加载我的网页的未更新缓存版本。