使用innerHTML显示input值时，不同位数数值无法居中的问题求助

你的问题出在固定定位的left值——当数值从1位（如5）变成3位（如200）时，元素宽度变化，但left固定，自然没法保持和下划线居中对齐。

直接改CSS和HTML结构就能解决，核心思路是让数值容器相对于下划线所在的区域自动居中，而不是硬写left值：

修改后的完整代码 #

HTML

<div class="display-container">
  <input type="range" min="0" max="200" step="1" value="0" id="inputRange">
  <div class="underline"></div>
  <div class="dotDisplay dotDisplay-show">--</div>
</div>

CSS

.display-container {
  position: relative;
  width: fit-content;
  margin: 20px;
}

.underline {
  position: absolute;
  width: 35px;
  border-bottom: 2px solid #000;
  left: 50%;
  transform: translateX(-50%);
  top: 45px;
}

.dotDisplay {
  color: #32608D;
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  left: 50%;
  transform: translateX(-50%);
  top: 15px;
  min-width: 35px;
  text-align: center;
}

JS（无需修改，保持原逻辑即可）

const inputRange = document.querySelector("#inputRange");
const dotDisplay = document.querySelector(".dotDisplay-show");

inputRange.addEventListener("input", (e) => {
  const V = inputRange.value;
  console.log(V);
  dotDisplay.innerHTML = V;
});

关键修改说明 #

1. 新增.display-container作为父容器，设置position: relative，让内部绝对定位元素以它为参考
2. 下划线和数值容器都用left: 50% + transform: translateX(-50%)实现水平居中，不管元素宽度如何变化，始终保持居中
3. 给数值容器加min-width: 35px（和下划线宽度一致），确保短数值（如0）和长数值（如200）都能在相同宽度的容器内居中，避免宽度跳动
4. 调整top值适配新的布局结构，可根据你的实际页面需求微调

这样不管数值是1位、2位还是3位，都会始终和下划线保持居中对齐。

内容的提问来源于stack exchange，提问作者n.goat_