如何在navbar中均匀设置图片间的间距？

问题根源 #

1. Bootstrap的.container-fluid和.navbar自带默认内边距，打乱了flex布局的间距计算
2. <li>元素没有统一的宽度控制，部分背景图的background-position设置不一致（50%/0%），导致视觉上的间距偏差
3. 仅设置justify-content但未给子项统一尺寸，无法实现均等间距

修改步骤 #

1. 统一导航项尺寸：给所有<li>设置固定宽度，确保每个项占用空间一致

li {
  list-style-type: none;
  width: 50px; /* 可根据需求调整 */
  display: flex;
  justify-content: center;
}

2. 修正flex容器布局：清除Bootstrap默认间距，添加正确的justify-content属性

.my-flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around; /* 或space-between，根据布局需求选择 */
  padding: 0;
}

.container-fluid {
  padding: 0; /* 清除容器默认内边距 */
}

3. 统一背景图位置：将所有球队类的background-position改为50%，避免视觉偏移

/* 示例：修改monza类 */
.monza {
  background: url('https://i.ibb.co/WxFDdJk/monza.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

（所有设置no-repeat 0%的类都需要修改）

4. 统一点击区域尺寸：调整.disable类的宽高，确保每个图片的可点击区域一致

.disable {
  display: block;
  overflow: hidden;
  text-decoration: none;
  text-indent: 110%;
  width: 35px;
  height: 35px;
}

完成以上修改后，导航栏内的图片间距会完全均等，符合预期效果。

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