为什么我的菜单项之间没有空格？答案

【问题标题】：Why isn't there space between my menu items?为什么我的菜单项之间没有空格？
【发布时间】：2022-02-11 00:28:40
【问题描述】：

我正在制作一个测试网站，以便在 html 和 CSS 方面做得更好。我找到了一个设计并开始尝试制作这个设计我现在有这个：

但正如您所见，导航栏项目彼此之间的距离太近，并且出于某种原因图标不会显示。

有人可以向我解释为什么导航栏项目不会在彼此之间获得空间以及为什么我的图标没有显示吗？提前致谢。

nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

nav .logo {
  font-size: 2.5rem;
}

nav ul {
  display: flex;
  list-style-type: none;
  padding: 0;
}

nav li a {
  color: white;
  padding: 1rem 2rem;
  text-decoration: none;
}

<nav class='container'>
  <div class='logo'><i class="fa-solid fa-otter"></i>Sea otters</div>
  
  <ul>
    <li a href='#'>Home</li>
    <li a href='#'>Species</li>
    <li a href='#'>Habitat</li>
    <li a href='#'>Behavior</li>
    <li a href='#' class='highlight'>Ecology</li>
  </ul>
</nav>

【问题讨论】：

标签： html css

【解决方案1】：

您已合并列表项和锚元素标记。它们是单独的元素，需要单独的标签。

<li><a href='#'>Home</a></li>

【讨论】：

【解决方案2】：

<nav class='container'>
   <div class='logo'><i class="fa-solid fa-otter"></i>Sea otters</div>  
      <ul>
         <li><a href='#'>Home</a></li>
         <li><a href='#'>Species</a></li>
         <li><a href='#'>Habitat</a></li>
         <li><a href='#'>Behavior</a></li>
         <li><a href='#' class='highlight'>Ecology</a></li>
     </ul>
</nav>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
欢迎。预计SO会有一些解释。见How to Answer。