HTML/CSS如何实现小屏两个技能条盒子垂直对齐且宽度一致

1. 解决两个盒子宽度不一致问题 #

核心原因通常是flex子项默认的伸缩规则生效、盒模型配置不一致或者选择器优先级冲突，按以下规则修改：

• 避免使用.master div这类广谱选择器设置宽度，改用类名选择器控制样式优先级，你可以给两个进度条盒子设置共同类名简化代码，或者直接用并集选择器声明样式：

/* 以下两种写法二选一即可 */
/* 写法1：用共同类名，两个盒子都加skill-bar-group类 */
.master .skill-bar-group {
  width: 97%;
  flex-shrink: 0; /* 禁止flex布局下子项自动收缩 */
  flex-grow: 0; /* 禁止flex布局下子项自动拉伸占满剩余空间 */
  box-sizing: border-box; /* 确保内边距、边框不会额外撑大盒子宽度 */
}

/* 写法2：直接指定原有两个类名 */
.master .skill-bars,
.master .skill-bars1 {
  width: 97%;
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
}

• 若仍有其他优先级更高的规则覆盖宽度，可以在width属性值后加!important强制生效，更推荐通过提高选择器权重解决。
• 可以通过浏览器开发者工具的元素检查面板，查看第二个盒子的计算宽度来源，定位是否有其他未清理的规则单独修改了.skill-bars1的宽度。

2. 解决小屏设备垂直对齐问题 #

给flex父容器.master补充对应媒体查询规则即可：

@media (max-width: 499px) {
  .master {
    display: flex;
    flex-direction: column;
    align-items: center; /* 若需要左对齐则改为flex-start */
    gap: 20px; /* 两个盒子的垂直间距可按需调整 */
  }
}

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