有人可以幫我弄清楚為什么我的導航鏈接在使用內聯塊時會堆疊嗎？

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>