为什么我的 flexbox 导航栏不能正确对齐？

Question

本质上，我希望菜单按原样显示（列），但位于导航栏下方，而不是将其自身定位在 logo/hamburger.

之间

据我所知，问题是媒体查询断点内的菜单仍在媒体查询之前的初始 flexbox 容器内。我还没有完全设计导航栏的样式，所以空的类不会永远是空的。

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/01-digitall');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

body {
  background: #ffffff;
  font-family: 'Quicksand', sans-serif;
}

.container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0;
}

nav {
  width: 100%;
  height: 100px;
  background: silver;
}

nav .container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding: 10px;
}

.logo {
  font-family: '01 Digitall';
  font-size: 40px;
  text-transform: uppercase;
  display: flex;
  height: 100%;
  align-items: center;
}

.logo .black {
  color: #000000;
}

.logo .red {
  color: #ff0000;
}

.nav-menu {
  display: flex;
  height: 100%;
  align-items: center;
  display: none;
}

nav ul {
  display: flex;
  height: 100%;
  align-items: center;
}

nav li {}

nav a {
  color: #000000;
}

@media (max-width: 768px) {
  nav {}
  .logo {}
  .nav-menu {
    display: flex;
  }
  nav ul {
    flex-direction: column;
    position: absolute;
    width: 100%;
  }
  nav li {}
  nav a {
    color: red;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
  <div class="container">
    <div class="logo">
      <span class="black">Test</span>
      <span class="red">Website</span>
    </div>


    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <div class="nav-menu">
      <i class="fa-solid fa-bars"></i>
    </div>
  </div>
</nav>

我决定以移动优先为主导，仍在学习并掌握 flex box。

Answer 1

您的问题主要与绝对定位的基础知识有关。这些元素相对于最近的 non-static 祖先定位，因此我将相对位置放在父元素上。然后，如果你想对齐按钮下方的菜单，100% 宽度是有问题的。我还将正确的值设置为零以将其移到一边。

我在某种程度上猜测你想要什么。如果我说错了，请提供更多细节。

向下滚动 CSS 面板以查看更改标记。

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/01-digitall');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

body {
  background: #ffffff;
  font-family: 'Quicksand', sans-serif;
}

.container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0;
}

nav {
  width: 100%;
  height: 100px;
  background: silver;
}

nav .container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding: 10px;
}

.logo {
  font-family: '01 Digitall';
  font-size: 40px;
  text-transform: uppercase;
  display: flex;
  height: 100%;
  align-items: center;
}

.logo .black {
  color: #000000;
}

.logo .red {
  color: #ff0000;
}

.nav-menu {
  display: flex;
  height: 100%;
  align-items: center;
  display: none;
}

nav ul {
  display: flex;
  height: 100%;
  align-items: center;
}

nav li {}

nav a {
  color: #000000;
}

@media (max-width: 768px) {
  nav {
    position: relative; /* <------------------------- HERE */
  }
  .logo {}
  .nav-menu {
    display: flex;
  }
  nav ul {
    flex-direction: column;
    position: absolute;
    right: 0; /* <------------------------- HERE */
    /* width: 100%; */ /* <------------------------- HERE */
    top: 100%; /* <------------------------- HERE */
  }
  nav li {}
  nav a {
    color: red;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
  <div class="container">
    <div class="logo">
      <span class="black">Test</span>
      <span class="red">Website</span>
    </div>


    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <div class="nav-menu">
      <i class="fa-solid fa-bars"></i>
    </div>
  </div>
</nav>

Answer 2

当您设置 position: absolute 时，元素将保持在未定位时的相同位置。在这种情况下，如果不是属性，菜单就会位于徽标和汉堡包之间，因为它们都在一个弹性容器中。

当你使用绝对定位时，通常会想设置top、left或类似的属性来调整它的位置。

在您的情况下，将其放在 header 下方的一种快速方法是：

将容器 (".container") 设置为 position: relative。这样，当我们在下一条规则中引用“100%”时，我们将考虑容器的大小而不是整个文档。
向菜单 (".container > ul") 添加以下属性：

top: 100%;
left: 0px;

这会将菜单定位在 header 的正下方。

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/01-digitall');

/* EDITED CSS ARE IN THE MEDIA QUERY BELOW */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

body {
  background: #ffffff;
  font-family: 'Quicksand', sans-serif;
}

.container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0;
}

nav {
  width: 100%;
  height: 100px;
  background: silver;
}

nav .container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding: 10px;
}

.logo {
  font-family: '01 Digitall';
  font-size: 40px;
  text-transform: uppercase;
  display: flex;
  height: 100%;
  align-items: center;
}

.logo .black {
  color: #000000;
}

.logo .red {
  color: #ff0000;
}

.nav-menu {
  display: flex;
  height: 100%;
  align-items: center;
  display: none;
}

nav ul {
  display: flex;
  height: 100%;
  align-items: center;
}

nav li {}

nav a {
  color: #000000;
}

@media (max-width: 768px) {

  /* EDITED CSS */
  .container {
    position: relative;
  }

  .container > ul {
    top: 100%;
    left: 0;
  }

  /* END EDITED CSS */
  
  
  nav {}
  .logo {}
  .nav-menu {
    display: flex;
  }
  nav ul {
    flex-direction: column;
    position: absolute;
    width: 100%;
  }
  nav li {}
  nav a {
    color: red;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
  <div class="container">
    <div class="logo">
      <span class="black">Test</span>
      <span class="red">Website</span>
    </div>


    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <div class="nav-menu">
      <i class="fa-solid fa-bars"></i>
    </div>
  </div>
</nav>

Answer 3

使用 JS 试试。

css:

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/01-digitall');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}

body {
    background: #ffffff;
    font-family: 'Quicksand', sans-serif;
}


.container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0;
}

nav {
    width: 100%;
    height: 100px;
    background: silver;
}

nav .container {
    display: flex;
    justify-content: space-between;
    height: 100%;
    padding: 10px;
}

.logo {
    font-family: '01 Digitall';
    font-size: 40px;
    text-transform: uppercase;
    display: flex;
    height: 100%;
    align-items: center;
}

.logo .black {
    color: #000000;
}

.logo .red {
    color: #ff0000;
}

.nav-menu {
    height: 100%;
    align-items: center;
    display: none;
}

nav ul {
    display: inline-flex;
    height: 100%;
    align-items: center;
}

nav a {
    color: #000000;
}

@media (max-width: 768px) {
    nav {}
    .logo {}
    .nav-menu {
    display: flex;
    }
    nav ul {
        flex-direction: column;
        position: relative;
        width: 100%;
        display: none;
        top: 100px;
        right: 15%
    }
    nav li {}
    nav a {
        color: red;
    }
}

js:

const links = document.querySelector("nav ul")
const navMenu = document.querySelector(".nav-menu")

if (window.matchMedia("(max-width: 768px)").matches) {

}

let linksOpen = false
console.log("Start: links is closed")

navMenu.addEventListener("click", () => {
    if (linksOpen === false) {
        links.style.display = "inline-flex"
        linksOpen = true
        console.log("links is open")
    } else {
        links.style.display = "none"
        linksOpen = false
        console.log("links is closed")
    }
})

为什么我的 flexbox 导航栏不能正确对齐？

Why won't my flexbox navbar align correctly?

html

javascript

css

flexbox