0

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

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 是块）所以这里是我希望导航看起来像的细节（请帮助我）： 网站设计 http://students.thenet.ca/jlandon /images/sitedesign.png

4

4 回答 4

3

你为什么使用 H2 作为导航元素？

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

于 2013-01-09T20:21:10.600 回答
3

h2 默认情况下是一个块元素，这就是打破你的界限的原因。

您可以通过在 h2s 上设置 display: inline （可能不是一个好主意）或将 h2s 替换为其他东西（例如将 a 标签设置为您想要的大小和字体等）来修复它。

于 2013-01-09T20:22:07.443 回答
1

我认为 afloat: left会解决这个问题：

li 
{   
  display:inline;
  float: left;
  list-style-type:none;
}
于 2013-01-09T20:23:59.257 回答
0

您应该考虑在导航中使用语义类而不是使用像 h2 这样的块元素。如果通过使用 h2 元素，你想要一个具有一定大小的粗体字体，那么你应该考虑这个：

.nav-text, #nav li a {
  font-size: 1.25em;
  font-weight: bold; }

#nav {
  background-color: #c6c7c3;
  height: 50px;
  margin-top: 120px;
  z-index: 2; }

另请注意，我使用 em 而不是像素。如果您将来决定将页面扩展到移动网站，这将有助于响应式设计。

您的 html 将是这样的：

<div id="nav">
  <ul>
    <li><a href="index.php">Home</a></li> 
    <li><a href="about.php">About</a></li> 
    <li><a href="school.php">School</a></li> 
    <li><a href="workshop">Workshop</a></li> 
    <li><a href="contact.php">Contact</a></li>
  </ul>
</div>
于 2013-01-09T20:43:12.210 回答