Javascript 在滑动滑块旁边添加固定文本（使用内嵌块或flex调整滑块大小）

使用滑动条制作文本的变化/淡入线。我想在它的左侧显示静态文本，并在滑块的右侧显示动态文本。当我尝试在两个元素上使用内联块时，滑块的大小不能正确缩小以允许它连接同一行上的固定文本。当我使用display:flex；在.slider容器上，它使滑块非常宽，从而使.stative文本非常小，并且即使使用flex grow也不允许调整大小。请告知

请参见此处和注释/取消注释以查看内联块和flex行为：

功能${ //添加平滑滑块 $'.slider'。光滑{ 点：错， 箭头：错， 无限：是的， 速度:200,， 是的， cssEase:'线性'， 幻灯片放映：1， 幻灯片滚动：1， 自动播放：对， 自动播放速度：1000 }; }jQuery； /*内联块：不允许滑块调整较小的大小*/ .固定滑块{ 显示：内联块； } /*弹性：产生非常宽的滑块，并向下挤压固定块*/ /*.滑块容器{ 显示器：flex； 对齐项目：居中； } .固定的{ 柔性生长：1； } */ 你可以： 这样做 那样做 赢得这个 给这个

---

因此，我在JSFIDLE中测试了您的代码，并遇到了您提出的问题，为了找到一个真正的动态解决方案，大脑感到非常不安，但无法解决。然而，我确实找到了一个解决方案，我只是在滑块上设置了一个宽度，在容器上设置了一个最大宽度

您可以看到使用您的代码处理解决方案的麻烦

//添加平滑滑块 $'.slider'。光滑{ 点：错， 箭头：错， 无限：是的， 速度:200,， 是的， cssEase:'线性'， 幻灯片放映：1， 幻灯片滚动：1， 自动播放：对， 自动播放速度：1000 }; .滑块容器{ 显示器：flex； 调整内容：灵活启动； 对齐项目：居中； 最大宽度：500px； 溢出：隐藏； } .固定的{ 弹性收缩：0； 柔性生长：1； 弹性基础：自动； 右边距：10px； } .滑块{ 弹性收缩：1； flex-grow:0； 弹性基准：100%； 文本对齐：左对齐； 宽度：200px； } 你可以： 这样做 那样做 赢得这个 给这个

---

非常感谢。宽度现在起作用了-我的客户需要淡入淡出的文本效果，我在javascript解决方案中很难让淡入淡出的动画正常工作，但是如果有更多的时间，我会更愿意深入研究这个问题，因为它看起来是一个更干净的解决方案！我对Typed.js很熟悉，但我看不到任何淡入淡出的功能-如果我遗漏了什么，请告诉我，并感谢您的全面回复！是的，当然，我甚至给我的同事看了一个光滑的东西，我们得到的最接近的结果是将宽度设置为100%，但是这让它在页面上溢出，这当然不理想。