如何在導航欄中使籃子圖示回應移動設備？

我想讓導航欄回應，唯一我無法修復的是籃子圖示，它總是移動到兩側取決于螢屏的大小，我怎樣才能讓它在中間位置不管螢屏的大小？

這是CSS代碼：

/* Nav Bar Styling */

a {
  text-decoration: none;
}
li {
  list-style-type: none;
}
.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 70px;
  box-shadow: rgba(50, 50, 93, 0.23) 0px 30px 30px -20px;
  /* max-width: 100vw;
  overflow: hidden; */
}
.logo {
  font-size: 30px;
}
.nav-links {
  display: flex;
  justify-content: flex-end;
  width: 75%;
  margin: 30px;
}

.nav-links li {
  color: black;
  font-size: 20px;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  text-transform: capitalize;
}
.hero {
  text-align: center;
  margin-top: 15%;
}
.hero h1 {
  text-align: center;
  font-size: 80px;
}
.mobile-menu-icon {
  display: none;
}
button {
  border: none;
  text-decoration: none;
  font-size: 20px;
  background: none;
}
/* Creating a circle with number of items */
.num-items {
  color: #fff;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  bottom: 0;
  right: 18px;
  /* transform: translate(-425%, -2095%); */
  border-radius: 50%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* basket */
#basket {
  background-color: #fff;
  width: 2rem;
  height: 2rem;
  position: relative;
  border: none;
  border-radius: 50%;
  outline: none;
  color: #4d77ff;
  margin: 10px 30px;
}

.basket {
  margin-top: 10px;
  position: relative;
}

/* =======Mobile====== */
@media (max-width: 768px) {
  .logo {
    display: flex;
    position: absolute;
    top: 15px;
    left: 35px;
  }
  .nav-links {
    display: none;
  }
  .nav-links-mobile {
    position: absolute;
    display: flex;
    flex-direction: column;
    list-style: none;
    box-shadow: rgba(50, 50, 93, 0.23) 0px 50px 100px -20px;
    top: 10%;
    transition: all 0.5s ease-in-out;
    width: 100%;
    background-color: white;
    padding-bottom: 50px;
    z-index: 10;
  }
  ul li {
    padding: 52px;
    width: 100%;
    transition: all 0.5s ease-in-out;
    text-align: center;
    color: var(--secondary-dark-color);
  }
  .mobile-menu-icon {
    position: absolute;
    display: block;
    /* justify-content: center; */
    right: 20px;
  }
  .hero h1 {
    font-size: 50px;
  }
  .basket {
    position: relative;
    display: block;
    top: 70%;
    transition: all 0.5s ease-in-out;
    width: 50px;
    margin-left: 320px;
  }

  .num-items {
    right: -20px;
  }
}

@media (max-width: 700px) {
  .basket {
    margin-left: 290px;
  }
  .num-items {
    right: -20px;
  }
}
@media (max-width: 570px) {
  .basket {
    margin-left: 100px;
  }
  .num-items {
    right: -20px;
  }
}

這里的JS代碼：

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import { AiOutlineUser } from "react-icons/ai";
import { BsFillCartFill } from "react-icons/bs";
import { FaBars } from "react-icons/fa";
import { ImCross } from "react-icons/im";
import "./styles/Navbar.css";

function Navbar() {
  const [mobile, setMobile] = useState(false);

  const state = useSelector((state) => state.basketReducer);

  return (
    <>
      <nav className="navbar">
        <h3 className="logo">Logo</h3>
        <ul
          id="nav-links-mobiles"
          className={mobile ? "nav-links-mobile" : "nav-links"}
          onClick={() => setMobile(false)}
        >
          <Link to="/" className="home">
            <li>Home</li>
          </Link>
          <Link to="/products" className="about">
            <li>All Clothing</li>
          </Link>
          <Link to="/signup" className="signup">
            <li>Sign Up</li>
          </Link>
          <div className="basket">
            <Link to="/basket">
              <BsFillCartFill id="basket" />
              <div className="num-items ">{state.length} </div>
            </Link>
          </div>
        </ul>
        <button className="mobile-menu-icon" onClick={() => setMobile(!mobile)}>
          {mobile ? <ImCross /> : <FaBars />}
        </button>
      </nav>
    </>
  );
}

export default Navbar;

我嘗試為不同尺寸的螢屏撰寫媒體查詢，但它只減少了 10 像素，并且籃子再次出現在錯誤的位置。也許

uj5u.com熱心網友回復：

只需添加此 CSS 代碼即可使其以移動設備為中心。

.basket {
  position: relative;
  display: table;
  top: 70%;
  transition: all 0.5s ease-in-out;
  width: 50px;
  margin:0 auto;
}

標籤：css反应

上一篇：如何在樣式化組件上進行條件渲染？

下一篇：當我控制臺記錄回應時，我變得不確定