在获取导航列表以内联方式显示时遇到问题

Question

好的，这是我正在处理的页面的链接：

http://students.thenet.ca/jlandon/

如您所见，列表仍然是垂直显示的，而不是水平显示的。

CSS：

li              {   display:inline;
                list-style-type:none;
            }
#nav            {   background-color:#c6c7c3;
                height:50px;
                margin-top:120px;
                z-index:2;
            }

HTML

<div id="nav">
<ul>
<li><a href="index.php"><h2>Home</h2></a></li> <li><a href="about.php"><h2>About</h2></a></li> <li><a href="school.php"><h2>School</h2></a></li> <li><a href="workshop"><h2>Workshop</h2></a></li> <li><a href="contact.php"><h2>Contact</h2></a></li>
</ul>
</div>

好了，现在我知道为什么它不工作了(H1-6是块)，所以这是我想要的导航的细节(请帮助我)：site design http://students.thenet.ca/jlandon/images/sitedesign.png

Answer 1

为什么要对导航元素使用H2？

将它们更改为也显示内联，或使用内联元素。

Answer 2

默认情况下，h2是一个块元素，这就是您的问题所在。

你可以通过在h2s上设置display: inline来解决这个问题(可能不是一个好主意)，或者用其他东西替换h2s (比如设置标签的样式为你想要的大小和字体，等等)。

Answer 3

我认为float: left可以解决这个问题：

li 
{   
  display:inline;
  float: left;
  list-style-type:none;
}