如何让Navbar中的购物篮图标在移动端保持响应式居中？

API 探路者

2026-8-14

我正在开发响应式Navbar，目前只有购物篮（basket）图标无法适配——它会随屏幕尺寸变化偏移位置。我希望无论屏幕尺寸如何，该图标都能保持居中显示。我尝试为不同屏幕尺寸编写媒体查询，但仅能微调位置，很快图标又会回到错误位置。

问题截图

大屏幕下的购物篮位置
小屏幕下的购物篮位置

现有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;
  }
}

现有React代码

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;

解决方案

问题根源是你在移动端用了固定的margin-left来定位购物篮，这种硬编码的数值无法适配所有屏幕尺寸。以下是修复步骤：

1. 调整购物篮在移动端的布局逻辑

移除所有媒体查询中针对.basket的margin-left和top属性，改用绝对定位结合transform实现自适应：

@media (max-width: 768px) {
  /* 保留原有其他样式，删除原有的.basket移动端样式 */
  
  /* 添加新的移动端购物篮样式 */
  .basket {
    position: absolute;
    right: 70px; /* 与汉堡菜单保持固定间距 */
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .num-items {
    right: -8px;
    bottom: -8px;
  }
}

/* 删除以下两个硬编码margin的媒体查询 */
/*
@media (max-width: 700px) {
  .basket {
    margin-left: 290px;
  }
  .num-items {
    right: -20px;
  }
}
@media (max-width: 570px) {
  .basket {
    margin-left: 100px;
  }
  .num-items {
    right: -20px;
  }
}
*/

2. 优化购物篮徽章的基础定位

修改.num-items的基础样式，确保它始终相对于购物篮图标右上角偏移：

.num-items {
  color: #fff;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  bottom: -8px;
  right: -8px;
  border-radius: 50%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
}

3. 可选：调整React结构优化布局逻辑

将购物篮从ul中移出，直接放在navbar容器内，脱离菜单列表的布局约束：

function Navbar() {
  const [mobile, setMobile] = useState(false);
  const state = useSelector((state) => state.basketReducer);

  return (
    <>
      <nav className="navbar">
        <h3 className="logo">Logo</h3>
        {/* 购物篮移至navbar下，与菜单同级 */}
        <div className="basket">
          <Link to="/basket">
            <BsFillCartFill id="basket" />
            <div className="num-items ">{state.length} </div>
          </Link>
        </div>
        <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>
        </ul>
        <button className="mobile-menu-icon" onClick={() => setMobile(!mobile)}>
          {mobile ? <ImCross /> : <FaBars />}
        </button>
      </nav>
    </>
  );
}

原理说明

用position: absolute结合right和transform: translateY(-50%)实现购物篮在navbar垂直居中，水平固定在汉堡菜单左侧，适配所有移动端屏幕。
删除硬编码的margin-left，避免不同屏幕尺寸下的偏移问题。
调整徽章的绝对定位参考，确保始终在购物篮图标右上角。

内容的提问来源于stack exchange，提问作者zulfiya

如何让Navbar中的购物篮图标在移动端保持响应式居中？

问题截图 #

现有CSS代码 #

现有React代码 #

解决方案 #

1. 调整购物篮在移动端的布局逻辑 #

2. 优化购物篮徽章的基础定位 #

3. 可选：调整React结构优化布局逻辑 #

原理说明 #