有人能帮我弄清楚为什么我的ul不会变成横向导航？ 谢谢 ：）

Question

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

这是它应该是什么样子，以及我现在拥有的东西 。 着色等现在不是问题。

以下是我正在使用的相关代码。 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类。 所以不要担心任何其他代码。

问题是你已经在.nav元素上放置了display:inline-block 。 你真的想要孩子们。 你可以选择.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>