有人可以帮我弄清楚为什么我的导航链接在使用内联块时会堆叠吗？

Question

我需要这些导航链接：“关于”“简历”“项目”和“联系人”在导航栏中排列。 任何人都知道为什么要使用 display: inline-block 这样做吗？

我的理解是内联块框应该允许这些元素并排。 我需要它是内联块而不是内联，因为我需要能够将其调整到导航栏的确切高度。 非常感谢任何帮助，谢谢

这是我的导航的 html 和 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ：

 /* ----------------------------NAVIGATION SECTION-------------------------------- */.headerContainer { background-color: #000; text-align: center; height:60px; margin-left: 600px; margin-right: 600px; font-family: 'Monda', sans-serif; text-transform: uppercase; position: fixed; } nav { padding-left: 1000px; padding-right: 1000px; } nav li { list-style: none; display: inline-block; background-color: #000; height: 40px; padding-top: 20px; width: 120px; } nav li:hover { background-color: #e1e1e1; -webkit-text-stroke: 2px #000; } a:link { color: #fff; text-decoration: none; margin-left:25px; margin-right:25px; } a:visited { color: #fff; } a:focus { color: #fff; } a:hover { } a:active { color: #fff; }

 < ------------------------------NAVIGATION SECTION----------------------------------> <header class="headerContainer"> <nav> <ul> < -- you put the end tag ">" at the beginning of next line to get rid of whitespace between the links --> <li><a href="#">About</a></li ><li><a href="#">Resume</a></li ><li><a href="#">Projects</a></li ><li><a href="#">Contact</a></li> </ul> </nav> </header>

Answer 1

使用flexbox的基本示例

 * { margin: 0; padding: 0; box-sizing: border-box; } nav { width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; background-color: #e6e6e6; } nav ul { display: flex; column-gap: 1rem; list-style: none; } nav a { color: black; text-decoration: none; font-family: sans-serif; }

 <header class="headerContainer"> <nav> <ul> < -- you put the end tag ">" at the beginning of next line to get rid of whitespace between the links --> <li><a href="#">About</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>

Answer 2

您当前的代码不起作用，因此很难准确解释菜单堆叠的原因，但它可能与较大的边距和填充有关。

此解决方案显示了如何更改以使您的代码按要求工作。

关键是在body和nav ul中添加margin: 0px ，并删除不必要的600 px和1000 px的大边距和填充。

以下帖子也与此问题相关，以删除导航栏上方的空间： 为什么 <ul> 添加额外的上边距？

以下关于框 model 的文章解释了有关填充和边距的所有内容： https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model

 body { margin: 0px; }.headerContainer { background-color: #000; text-align: center; width:100%; height:60px; font-family: 'Monda', sans-serif; text-transform: uppercase; } nav { text-align: center; } nav ul { margin:0px; } nav li { list-style: none; display: inline-block; background-color: #000; height: 40px; padding-top: 20px; width: 120px; } nav li:hover { background-color: #e1e1e1; -webkit-text-stroke: 2px #000; } a:link { color: #fff; text-decoration: none; } a:visited { color: #fff; } a:focus { color: #fff; } a:hover { } a:active { color: #fff; }

 <header class="headerContainer"> <nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>