我的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;
}
这似乎根本不起作用。
您需要将您的样式应用于ul元素:
.single-level ul{ display: flex; justify-content: space between; }