html - 无法让导航列表内联显示

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 是 block )所以这里是我希望导航看起来像的细节(请帮助我): site design http://students.thenet.ca/jlandon/images/sitedesign.png

Answer 1

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

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