Javascript 如何与CSS对齐我的输入和标签

我使用html编写了以下代码：

R:[m]：10
40
函数updateValue_R（val）{
document.getElementById（'textInput'）。value=“R=”+val；
}


Sf:[mks:m/Pa]：-15
-9
函数updateValue_Sf（val）{
document.getElementById（'textInput1'）。value=“Sf=”+val；
}

您可以使用

显示：内联块；垂直对齐：中间对齐用于此。检查下面更新的代码段


标签、输入、跨度{
显示：内联块；
垂直对齐：中间对齐；
}
.1{
宽度：150px；
}
.3{
宽度：30px；
}

R:[m]：10
40
函数updateValue_R（val）{document.getElementById（'textInput'）。value=“R=”+val；}


Sf:[mks:m/Pa]：-15
-9
函数updateValue_Sf（val）{document.getElementById（'textInput1'）。value=“Sf=“+val；”

您必须在CSS中添加固定的

宽度

，以正确对齐元素

有关其他建议，请参阅此工作片段中的注释：
（我移动了一些代码，使代码片段更整洁/更好）

//对其进行了修改，只获得一个“函数”，并删除了内联JavaScript
var sliders=document.querySelectorAll（'.slider'）；
sliders.forEach（函数（）{
此.addEventListener（“更改”，函数（事件）{
var elm=event.target；
sliderText=elm.nextElementSibling.nextElementSibling；//以输入标记为目标
sliderText.value=elm.getAttribute（“前缀”）+'='+elm.value；
});
});
#right*[class^=“width”]{/*以#right中以“width”开头的所有元素为目标*/
边框：添加1px实心#ccc；/*以使其可见*/
垂直对齐：中间；/*此选项的布局更好*/
显示：内联块；/*如果没有此选项，下面的宽度将无法工作*/
}
.width1{/*这是您需要的*/
宽度：130px；
}
.width3{/*您也必须添加此项*/
宽度：30px；
文本对齐：居中；
}

R:[m]：
10
40


Sf:[mks:m/Pa]：
-15
-9
最快的方法可能是使用
网格
布局，它还可以很好地适应视口，而无需媒体查询

将每行包装在
div
元素中

<div>
   <label class='width1'>R : [m] : 10 </label>
   <input class='width2 slider' ...>
   <span  class='width3'>40</span>
   <input class='width4' ...>
</div>



然后您可以执行一些小的调整（例如，为
.width3
元素提供
文本对齐：right
）


结果

您只需将表格和行对齐即可
就像下面的代码







R:[m]：10
40
函数updateValue_R（val）{
document.getElementById（'textInput'）。value=“R=”+val；
}
Sf:[mks:m/Pa]：-15
-9
函数updateValue_Sf（val）{
document.getElementById（'textInput1'）。value=“Sf=”+val；
}
由于浏览器对
显示：网格（CSS网格）的支持有限，我建议您使用Flexbox这样做


*{框大小：边框框；}
.行{
显示器：flex；
}
.行标签{
最小宽度：150px；
}
.行跨度{
最小宽度：20px；
}
.行输入{
左边距：20px；
}
输入{宽度：100%；}

R:[m]：10
40
Sf:[mks:m/Pa]：-15
-9
函数updateValue_R（val）{
document.getElementById（'textInput'）。value=“R=”+val；
}
函数updateValue_Sf（val）{
document.getElementById（'textInput1'）。value=“Sf=”+val；
}
与其他输入对齐？如第二张图中所示，我希望第一个输入从与第二个输入类型range相同的横坐标开始。这就是为什么我想使用右边距，但没有成功。谢谢，但我想做的是，类型范围的第一个输入从同一横坐标开始，就像类型范围的第二个输入一样。谢谢，但我想做的是，类型范围的第一个输入从同一横坐标开始，就像类型范围的第二个输入一样我已经更新并在HTML和JS中做了一些修改，我认为这是可能的改进。请随意评论，如果有的话！
div {
  display: grid;
  grid-template-columns: 150px minmax(100px, 1fr) 50px minmax(50px, .25fr);
  grid-gap: 1vw;
}