为什么导航不是从上到下显示，而是从左到右显示

Question

​

​

下面是代码片段：

​

const exitBtn = document.querySelector('#exitBtn');

menuBtn.addEventListener('click', () => {
  const menu = document.querySelectorAll('.menu');
  for (let el of menu) {
    el.style.display = 'block'
  }
})

@media (max-width: 934px) {
  .max-width {
    padding: 0 50px;
  }
  .fa.fa-bars.menuBtn {
    display: block;
  }
  .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #111;
    text-align: center;
    padding-top: 110px;
  }
  .exit {
    z-index: 999;
    display: none;
    margin: 1.8rem;
  }
  .menu ul li {
    display: block;
  }
  .menu li a {
    display: inline-block;
    margin: 20px 0;
    font-size: 35px;
  }
}

<header>

  <nav class="navbar" id="nav">
    <div class="max-width">
      <div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
      <div class="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Skills</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">CV</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div>
        <i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
      </div>
      <div class="exit">
        <i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
      </div>

    </div>
  </nav>

​

我试着使它块，但它不起作用，我也试着使弯曲方向为列，但仍然不起作用。我是不是做错了什么？导致菜单不能从上到下显示的问题是什么？有没有其他方法来解决这个问题呢？

Answer 1

如果你想做的是一个侧边栏，或者就像我所理解的那样，你可以试着把导航栏类的位置设置为fixed，或者你想在边上做一个菜单栏，而不是一个行线。那么菜单的类别应该是伸缩的，而不是固定的。你应该为菜单制作一个容器，这个容器是固定的，这样它的所有内容都会固定在一边。向我展示更多的css，我可能会有所帮助。但是试着去做

.navbar{
width: width;
height: 100vh;
position: fixed;}

则"max-width“类将具有flex属性

.max-width{
display: flex;
flex-direction: column;}