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来修复它（比如只需将标签设置为你想要的大小和字体等）。 / p>

Answer 3

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

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

Answer 4

您应该考虑使用语义类，而不是在导航中使用像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>

无法使导航列表显示为内联

4 个答案: