html - 为什么我的列表项显示在其父 <div> 上方？

这在 Safari 和 Firefox 中都会发生。我的导航栏看起来像这样:

<div>
  <ul>
    <li><a href="#">Test</a></li>
  </ul>
</div>

相关的 CSS 看起来像:

li {
  float: left
}

a:hover {
  background-color: blue;
}

出于某种原因，列表项 float 在 <div> 上方他们在里面(#navBar)。我不明白为什么这个看似简单的设计会导致问题。

floating above

感谢您的建议。

最佳答案

将display: block添加到#navBar a。

Example

关于html - 为什么我的列表项显示在其父 <div> 上方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7735509/