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

Question

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

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

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

图片可以更好地展现这一点：

我的标记看起来像这样（尽管在父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即可完成这项工作。

我也没有使用任何框架。

Answer 1

在没有任何实时演示的情况下，我只想猜测一下您的情况，这就是我认为应该解决的问题：只需对包含滚动条当前值的动态文本应用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 */
}

Answer 2

您可以按数字添加min-width并添加display:inline-block以应用宽度

.sliderDisplay {
    min-width: 20px;
    display: inline-block;
}

Answer 3

您需要将min-width和display: inline-block;设置为 .sliderDisplay

这是更新的小提琴：

.sliderDisplay {
  min-width: 40px;
  display: inline-block;
}

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

Answer 4

使用flexbox来实现

#triSizeGroup {
  display: flex;
  align-itmes: center;
}

#triSizeGroup input {
margin-left:15px;
}

<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>