Css 按钮的填充太大

为了解决当前导航栏按钮的问题，我一直在尝试更改CSS中的所有属性，但没有成功

当鼠标悬停在上方时，按钮超出了导航栏背景的高度，而它们本不应该这样做

我的HTML：

            <ul class="navigation">
                <li class="current"><a href="index.html"><em class="home"/>Home</b></a></li>
                <li><a href="second.html"><em class="photos"/><b>Photos</b></a></li>
                <li><a href="projects.html"><em class="projects"/><b>Projects</b></a></li>
                <li><a href="about.html"><em class="about"/><b>About</b></a></li>
                <li><a href="contact.html"><em class="contact"/><b>Contact</b></a></li>
            </ul>

---

您可以调整A元素上的填充：

.navigation li a {
  padding: 2px 5px;
}

---

此外，您的“em”标签也应该关闭。您有开始的“em”标记，但没有结束的“/em”标记。

我认为问题在于导航/Navigation/nav_hover.png图像。您正在对背景图像应用“重复”

请使用

.navigation li a:hover 
{
    background: url("Navigation/Navigation/nav_hover.png") **no-repeat** scroll 0 0 transparent;
    color: #00CCFF;
    padding: 11px 5px 10px;
    text-decoration: none;
}

在style.css中

---

让我知道这是否解决了问题。

您的整个HTML结构非常奇怪-您使用的是em元素而不是div（看起来），您正在菜单中嵌套li和em元素，等等。我不想听起来像个傻瓜，但我认为您需要在进入更高级的项目之前正确地学习基本的HTML。我是否应该在

中内部使用div？
应该只包含最顶层的
• ，如果需要，那些
• 可以包含标记。你也应该，绝对地，绝对地，不要像你一样使用标签。用于强调文本，而不是分割内容。就像我说的-在尝试构建这样的页面之前，你真的应该学习HTML并正确地学习它。我知道我应该学习HTML。但我使用的是来自不同网站的视频教程，tutsplus是我最喜欢的一个。但视频只涵盖html编码，直到某一点。我一直在努力寻找更高级的教程。你应该考虑读一本书，在那里你可以按自己的进度走，适当地测试，然后在需要的时候回去。W3Schools-是一个很好的（文本）资源。另外，我所说的绝不是“高级的”——使用内容分割是您首先要学习的事情之一。永远不要复制你不懂的代码，从头开始构建东西，确保你明白你在做什么，而不仅仅是确保它以某种方式工作。你的悬停状态还包括填充。我不是问这个问题的人。：）我想我们可能对他的问题有不同的理解。但这没什么大不了的，没什么用。我有标签。我一开始不允许关闭它而不是写东西吗？哦，现在我也改变了悬停状态，这很有帮助。谢谢：）啊，很公平，我误解了这个问题。：）这种情况发生了。别担心。

  .navigation li a:hover 
  {
      background: url("Navigation/Navigation/nav_hover.png") **no-repeat** scroll 0 0 transparent;
      color: #00CCFF;
      padding: 11px 5px 10px;
      text-decoration: none;
  }