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

Question

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

Here's what it is supposed to look like, and what I have now .着色等现在不是问题。

下面是我正在使用的相关代码。 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 元素上。你真的想让 children 这样做。您可以通过选择 .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 会更有值(value)。它会自动调整子元素的间距。查看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>