在下面的 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;
}
最佳答案
您提供的唯一影响 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>
关于html - 有人可以帮我弄清楚为什么我的 ul 没有变成水平导航吗?谢谢 :),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55885711/