Question

比方说，我有一些这样的HTML：

    <div style = "text-align: center">
      Radius: <span id = "radius">1</span><br>
      <input type="range" id="chosenRadius" oninput="updateRadius(this.value)" onchange="updateRadius(this.value)"  min="1" max="1000000" value="1" /><br>
    </div>

只要移动滑块，span就会更新为滑块的当前值。一切都位于其中的div居中。如何保持“半径：”文本不移动span内数字的长度？我不在乎半径值增加后是否不完全居中，只要半径接近即可。我希望此设置从居中开始，然后使“ radius：”文本保持固定。 Here is a simple JS bin.

Answer 1

#radius {
  position: absolute;
}

这显示了它：https://jsbin.com/forarasuze/1/edit?html,css,output

absolute职位将为您保持稳定

如何在居中和范围滑块值更改时防止文本移动？

1 个答案: