为什么使用 inline-block 时导航链接会堆叠？答案

【问题标题】：Why are the navigation links stacked when using inline-block?为什么使用 inline-block 时导航链接会堆叠？
【发布时间】：2022-10-05 21:51:07
【问题描述】：

我希望导航链接：\"about\"、\"resume\"、\"projects\" 和 \"contact\" 在导航栏中水平排列。

为什么这只适用于display: inline-block？

据我了解，inline-block 框允许这些元素并排放置。我需要它是inline-block 而不仅仅是inline，因为我想将它调整到nav 栏的确切高度。

我究竟做错了什么？

这是我的nav 的 HTML 和 CSS：

/* ----------------------------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>

标签： html css navigation

【解决方案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>

【讨论】：

多谢你们。我是新手，正在学习。我将看看 flexbox。