html - CSS-动态文字旁边的滑块对齐

这是我似乎无法解决的最烦人的事情之一。我什至无法搜索它，因为我什至都不知道如何开始向搜索引擎描述它。

我有一个静态文本，一个动态文本和一个按顺序排列的滑块。

动态文本显示滑动值。问题是当显示为一位数时，滑块向左移动一点。然后，当它是两位数的值时，它仅向右移一点。

图片可以更好地显示：



我的标记看起来像这样（尽管在父div中前后包裹着几个相同的片段）：

<span id="triSizeGroup">
    Triangle Size: <span class="sliderDisplay" id="triSizeDisplay">12</span>
    <input id="triSizeInput" type="range" min="3" max="24" step="1" value="12" class="slider">
</span>

我的最新尝试是尝试将整个块设置为固定宽度，并使滑块向右对齐，而文本向左对齐。但是似乎我似乎无法弄清魔术（因为逻辑，例如“ align”，“ float”，“ position：relative”，“ left”，“ right”等），似乎并没有请在此处申请）css的组合才能完成这项工作。

我也没有使用任何框架。

最佳答案

如果没有任何实时演示，我只想猜测一下您的情况，这就是我认为应该解决的问题：只需对包含滑块当前值的动态文本应用width css：

.sliderDisplay {
  ...
  width: 1.5em; /* try using some desirable value which is high enough for a 2-digit number */
  display: inline-block; /* to respect the specified width */
}

关于html - CSS-动态文字旁边的滑块对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55705951/