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

Question

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

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

相关的 CSS 看起来像:

li {
  float: left
}

a:hover {
  background-color: blue;
}

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

感谢您的建议。

Answer 1

将display: block添加到#navBar a。