有人可以帮我弄清楚为什么我的ul没有变成水平导航吗？谢谢 ：）

Question

在下面的HTML中，我试图使用无序列表（ul）创建水平导航。我尝试使用W3Schools作为指南，但是似乎没有用；我确定我只是忽略了一些东西。

SIGN_IN_REQUIRED。着色等问题现在不再需要关注。

以下是我正在使用的相关代码。 ul嵌套在主体中。我认为其余的CSS都不会影响到这一点，但是我可能是错的。

<ul class="nav">
    <li><a href="Contact.html">Contact</a></li>
    <li><a href="Employment.html">Employment</a></li>
    <li><a href="Projects.html">Projects</a></li>
    <li><a href="Services.html">Services</a></li>
    <li><a href="Company.html">Company</a></li>
</ul>




body {
font: normal normal normal 75%/1.3em verdana,geneva,lucida,arial,sans- 
serif; text-decoration: none;
}

.nav {
font: normal normal normal 100/2em verdana,geneva,lucida,arial,sans- 
serif; text-decoration: none; display: inline-block; list-style: none; 
text-decoration: none; text-align: center;
}


h1 {
font: normal normal normal 140%/1.3em 
verdana,geneva,lucida,arial,sans-serif; text-decoration: none;
}

h2 {
font: normal normal normal 120%/1.3em 
verdana,geneva,lucida,arial,sans-serif; text-decoration: none;
}

footer ul {
display: inline-block; list-style-type: none;
font: normal normal normal 90%/2em verdana,geneva,lucida,arial,sans- 
serif; text-decoration: none; text-align: center;
}

Answer 1

您提供的唯一影响ul的CSS是.nav类。因此，不必担心其他任何代码。

问题是您已将display:inline-block放在.nav元素上。您实际上是想在孩子身上。您可以选择.nav li。

.nav {
  font: normal normal normal 100/2em verdana, geneva, lucida, arial, sans-serif; 
  padding-left: 0;
  list-style: none;
  text-align: center;
}

.nav li {
  display: inline-block;
}

.nav li a {
  text-decoration: none;
}

<ul class="nav">
    <li><a href="Contact.html">Contact</a></li>
    <li><a href="Employment.html">Employment</a></li>
    <li><a href="Projects.html">Projects</a></li>
    <li><a href="Services.html">Services</a></li>
    <li><a href="Company.html">Company</a></li>
</ul>

话虽如此，您可能会发现使用flexbox会带来更多收益。它将自动调整子元素的间距。查看CSS-Tricks Guide了解更多信息。

.nav {
  font: normal normal normal 100/2em verdana, geneva, lucida, arial, sans-serif; 
  display: flex;
  justify-content: space-around;
  padding-left: 0;
  list-style: none;
  text-align: center;
}

.nav li a {
  text-decoration: none;
}

<ul class="nav">
    <li><a href="Contact.html">Contact</a></li>
    <li><a href="Employment.html">Employment</a></li>
    <li><a href="Projects.html">Projects</a></li>
    <li><a href="Services.html">Services</a></li>
    <li><a href="Company.html">Company</a></li>
</ul>