Html 在CSS中只使用输入字段的一部分

我有一个输入字段，在它的右侧有一个字符串，它向用户显示信息

<div class="my_div_class">
    <input class="my_input_class" type="text" placeholder="Search">
    <span class="my_span_class">6000 available</span>
</div>

6000个可用

使用相对位置和绝对位置，我将跨度放置在输入字段中

但是，如果用户键入一个长查询，则文本将位于跨度文本下

---

当用户到达右边距前的某个点时，是否有办法强制输入字段进行水平滚动，理想情况下不使用javascript？

您可以在输入框中添加一些

右键填充


.my\u div\u类{
位置：相对位置；
宽度：200px；
}
.my_input_类{
宽度：100%；
右边填充：100px；
框大小：边框框；
}
.我的班{
位置：绝对位置；
右：0；
排名：0；
}

6000个可用
您可以在输入框中添加一些右侧填充


.my\u div\u类{
位置：相对位置；
宽度：200px；
}
.my_input_类{
宽度：100%；
右边填充：100px；
框大小：边框框；
}
.我的班{
位置：绝对位置；
右：0；
排名：0；
}

6000个可用
谢谢！在我的示例中，我必须添加宽度和填充的组合。只需在右边添加填充，输入字段就会向右增长，问题仍然存在。@Bruno我还使用了框大小：border box；在本例中，填充和边框将成为总宽度和高度的一部分，这可能会有所帮助。谢谢！在我的示例中，我必须添加宽度和填充的组合。只需在右边添加填充，输入字段就会向右增长，问题仍然存在。@Bruno我还使用了框大小：border box；在本例中，填充和边框将成为总宽度和总高度的一部分，这可能会有所帮助。
.my_input_class {
  padding-right: 1em; // Replace `1em` with the desired amount of padding
}