进度条首个li元素设置text-align: left不生效该如何解决

我目前正在开发相关代码，可自行查看完整示例。

当前效果展示：
（效果图片略）

我想要实现进度条第一个<li>子元素的text-align: left效果，预期效果如下：
（预期效果图片略）

我已经尝试添加如下CSS样式，但添加后文本位置没有发生任何变化：

.progress-bar li:first-child span {
  text-align: left;
}

问题原因 #

<span> 默认为行内元素，宽度和自身内容完全一致，text-align 是作用于块级/行内块元素、控制其内部内容对齐方式的属性，行内元素没有多余的宽度空间承载对齐规则，因此上述样式设置不生效。

解决方案 #

可根据你的实际布局选择对应方案：

• 方案1：将span转为行内块元素，指定和对应区域匹配的宽度后设置对齐

.progress-bar li:first-child span {
  display: inline-block;
  width: 100%; /* 可根据你的布局实际宽度调整数值 */
  text-align: left;
}

• 方案2：直接给父级li元素设置对齐（适用于li本身为固定宽度块级元素的场景）

.progress-bar li:first-child {
  text-align: left;
}

如果修改后依旧不生效，可检查是否存在更高优先级的CSS规则覆盖了当前样式，可通过提升选择器权重（比如在选择器前增加外层容器的类名）或者临时加!important测试验证问题。

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