html - Flexbox:最后一个导航列表项移动到新行

Question

我正在尝试在同一行上创建一个导航栏。我试过使用 flex-direction: row。使所有列表项内联，但没有用。有什么想法吗？

@media (min-width: 900px) {
  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo-name {
    margin-left: 1%;
  }
  .main-nav {
    display: flex;
    background-color: orange;
  }
  .main-nav li {
    padding: 0.3em;
    align-items: flex-end;
  }
}

<header class="main-header">
  <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>

  <nav class="main-nav">
    <li class="nav-item-1"><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">FREE QUOTE</a></li>
  </nav>
</header>

Answer 1

问题出在@media (min-width: 900px)，只要把你的css代码移到@media (min-width: 900px) block 之外，然后一切都会工作。一个小问题是您在 nav 标签内定义了 li 标签，这在语义上不正确，标记无效，您应该将 nav 替换为 ul 标签

@media (min-width: 100px) {
  
}
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo-name {
    margin-left: 1%;
  }
  .main-nav {
    display: flex;
    list-style-type: none;
    background-color: orange;
  }
  .main-nav li {
    padding: 0.3em;
    align-items: flex-end;
  }

<header class="main-header">
  <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>

  <ul class="main-nav">
    <li class="nav-item-1"><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">FREE QUOTE</a></li>
  </ul>
</header>