如何调整导航栏旁购物车<figure>标签的尺寸？

核心问题分析 #

你的问题根源在两处CSS设置：

• 导航列表ul.overall-nav的width:150%和margin-left:-35%导致列表超出父容器范围，最后一项"help"被挤到购物车容器的覆盖区域内
• <figure>标签保留了浏览器默认外边距，且未设置宽度限制，加上图片width:35%的不合理设置，导致容器产生多余空白区域

修复步骤 #

1. 修正导航列表的异常尺寸设置
   删除header ul中的width:150%和margin-left:-35%，改用gap控制菜单项间距，调整布局逻辑：

   header ul{
       display: flex;
       flex-direction: row;
       list-style: none;
       justify-content: center;
       gap: 1rem; /* 用gap控制菜单项间距，避免过度拉伸 */
       letter-spacing: 3px;
       padding: 0; /* 清除默认内边距 */
       margin: 0; /* 清除默认外边距 */
   }
   

2. 重置并限制购物车容器尺寸
   清除<figure>的默认外边距，设置固定尺寸让图片填满容器：

   /* Cart */
   figure{
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 0; /* 清除浏览器默认外边距 */
       width: 30px; /* 按需调整固定宽度 */
       height: 30px; /* 匹配导航栏高度 */
   }
   
   header img{
       width: 100%; /* 让图片填满figure容器 */
       height: auto;
   }
   

3. 调整菜单与购物车的间距
   给menu-cart添加间距，避免导航与购物车紧贴：

   .menu-cart{
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: 1.5rem; /* 添加合理间距 */
   }
   

最终效果 #

修改后导航列表不会超出容器范围，<figure>尺寸被精准控制，不会再遮挡最后一项菜单，同时购物车图标保持合适大小。

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