本文详解如何通过 innerhtml 实时更新 range 滑块的数值显示，并利用 css 容器布局与文本对齐机制，确保不同位数（如 “5”、”50″、”150″）的数字始终水平居中于下划线正上方，彻底解决因宽度变化导致的错位问题。
在实际开发中，仅用 innerHTML 更新数值是不够的——若配合绝对定位（position: absolute）且未约束父容器行为，当数字位数变化（如从 “7” 变为 “199”），其渲染宽度改变会导致视觉偏移，无法稳定居中于下划线之上。
根本原因在于：原代码中 .underline 和 .dotDisplay-show 是两个独立的绝对定位元素，各自依据固定 left/top 值定位，彼此无尺寸依赖关系。一旦 .dotDisplay-show 内容变宽，其左边缘虽未动，但整体中心点已右移，而下划线位置不变，造成“数字漂移”。
✅ 正确解法是建立语义化父子关系 + 借助 text-align: center + width: fit-content：
