html - CSS - 动态文本旁边的 slider 对齐

Question

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

我依次有一段静态文本、一段动态文本和一个 slider 。

动态文本显示幻灯片值。问题是当显示为单个数字时， slider 向左移动一点点。然后当它是两位数的值时，它会向右移动一点。

一张图片可以更好地展示这一点:

我的标记看起来像这样(虽然前后有几个相同的片段都包裹在父 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>

我最近的尝试是尝试给整个 block 一个固定的宽度，并让 slider 向右对齐，而文本向左对齐。但似乎我似乎无法弄清楚神奇的东西(因为逻辑，如“对齐”、“ float ”、“position:relative”、“左”、“右”等，似乎并不在此处应用)css 组合来完成这项工作。

我也没有使用任何框架。

Answer 1

在没有任何现场演示的情况下，我只是尝试猜测在您的情况下会发生什么，这就是我认为应该解决您的问题的方法:只需将 width css 应用于包含当前值的动态文本你的 slider :

.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 */
}