为什么当我打开汉堡包和购物车图标时，它出现在汉堡包菜单下方

Question

最近我一直在学习响应式设计，当我打开汉堡包时遇到了这个问题，汉堡包和购物车图标出现在我的汉堡包菜单下方。 我无法找到我的代码发生的问题。

我附上错误图片以便更好地理解

在上图中，汉堡图标和购物车图标应位于右上角。

这是我的代码：

    <div className="navbar">
      <a href="#" className="navbar-logo">
        Redux Store
      </a>
      <ul className={`navbar-menu ${menuActive ? "active" : ""}`}>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Shop</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
      <Link className="cart-icon" to="/cart">
        🛒
        <div className="cart-quantity">3</div>{" "}
        {/* Replace '3' with the actual quantity */}
      </Link>
      <div
        className={`hamburger-menu ${menuActive ? "active" : ""}`}
        onClick={() => setMenuActive(!menuActive)}
      >
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

css

.navbar {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-logo {
  font-size: 1.5em;
  font-weight: bold;
  color: black;
  text-decoration: none;
}

.navbar-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-menu li {
  margin-right: 15px;
}

.navbar-menu a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.cart-icon {
  font-size: 1.2em;
  position: relative;
  right: 10px;
  cursor: pointer;
}

.cart-quantity {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 5px 8px;
  font-size: 0.4em;
}

.hamburger-menu {
  display: none;
  font-size: 1.5em;
  cursor: pointer;
  padding: 10px;
  transition: background-color 0.3s ease;
}

.hamburger-menu:hover {
  background-color: #f0f0f0;
}

.hamburger-menu span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: black;
  margin-bottom: 5px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-menu.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

@media only screen and (max-width: 600px) {
  .navbar {
    flex-direction: row;
    align-items: center;
  }

  .navbar-logo {
    order: 0;
  }

  .hamburger-menu {
    display: block;
    order: 1;
  }

  .cart-icon {
    display: block;
    margin-left: auto;
  }

  .navbar-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    text-align: center;
    margin-top: 15px;
  }

  .navbar-menu.active {
    display: flex;
  }
}

Answer 1

我认为问题出在你的 HTML 结构上。如果您使用以下结构，您的问题可能会得到解决：

<div className="navbar">
  <a href="#" className="navbar-logo">
    Redux Store
  </a>
  <div className={`hamburger-menu ${menuActive ? "active" : ""}`} onClick={() => setMenuActive(!menuActive)}>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul className={`navbar-menu ${menuActive ? "active" : ""}`}>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Shop</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
  <Link className="cart-icon" to="/cart">
    🛒
    <div className="cart-quantity">3</div>{" "}
    {/* Replace '3' with the actual quantity */}
  </Link>
</div>

更改此 CSS 属性：

.cart-icon {
    order: 2;
}