我的简单导航栏的导航栏代码似乎不起作用答案

【问题标题】：my navbar code for a simple navbar does not seem to be working我的简单导航栏的导航栏代码似乎不起作用
【发布时间】：2021-08-04 20:25:43
【问题描述】：

我的 HTML 代码：

<head>
  <link href="<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"">
</head>
<section class="standard-sidebar">
  <h1>Food Web</h1>
<nav id="standard" class="single-level nav" role="navigation">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
    </nav>
</section>

我的 CSS：

.single-level nav{
  display: flex;
  justify-content: space between;
}

这似乎根本不起作用。

【问题讨论】：

标签： html css web flexbox

【解决方案1】：

您需要将您的样式应用到 ul 元素：

.single-level ul{ display: flex; justify-content: space between; }

【讨论】：

现在应该，我编辑了我的代码。选择器匹配存在的元素是这个位置：.single-level > nav > ul，你可以看到没有元素会匹配这个路径。