html - 如何展开我的导航栏，我的代码中有 display:flex

Question

我一直在尝试展开我的导航栏，但我似乎做不到，我有 display: flex; on，使用 justify-content: space-around，但它似乎没有做任何事情。

https://codepen.io/picklemyrickle/pen/XWjzyvb

提前致谢。

<nav id="nav-bar">
<ul>
  <li> <a 
       class="nav-link" 
       href=#Programs
       id="Programs">
    Programs </a></li>
    
 <li> <a 
       class="nav-link"
       href=#Results 
       id="Results"
         >Results</a></li>
<li><a 
       class="nav-link" 
       href=#Pricing 
       id="Pricing">
  Pricing</a></li>
    </ul>           

nav > ul {
  display: flex;
justify-content: space-around;
}

标签： htmlcssflexboxtagsuinavigationbar

Answer 1

这里是：

.navbar{
    width: 100%;
    position: static;
    z-index: 1;    
    white-space: nowrap;
}

z index 确保它保持在顶部，static 确保它对 div 是静态的，width 100% 确保它始终是最大长度