如何用CSS实现input、label及相关表单元素的对齐？

看起来你遇到的核心问题是不同长度的label导致后续的range滑块和输入框无法对齐，单纯调整margin-right因为label本身宽度不固定，所以没法实现统一对齐。我们可以通过给label设置固定宽度，或者用Flex布局来实现整齐的排列效果。

方案一：给label设置固定宽度（快速适配现有代码） #

我们可以给.width1类添加固定宽度，同时让label变成行内块元素，这样不管label内容多长，都能占据相同的宽度，后面的元素自然就对齐了。

修改后的完整代码如下：

<style>
/* 添加这段CSS控制布局对齐 */
.width1 {
    display: inline-block;
    width: 220px; /* 可根据需求调整宽度 */
    text-align: right; /* 可选：让label文字右对齐，视觉更整齐 */
}
.width2 {
    width: 150px; /* 给滑块设置固定宽度，保证一致性 */
}
.width3 {
    display: inline-block;
    width: 40px;
    text-align: center;
}
.width4 {
    width: 100px;
}
</style>
<div id="right">
 <br><br><br>
 <label class='width1'>R : [m] : 10 </label>
 <input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" onchange="updateValue_R(this.value);">
 <span class='width3'>40</span>
 <input class='width4' type="text" id="textInput" value="">
 <script>
 function updateValue_R(val) {
 document.getElementById('textInput').value = "R = " + val;
 }
 </script>
 <br>
 <label class='width1'>Sf : [mks : m/Pa] : -15 </label>
 <input class="width2 slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" onchange="updateValue_Sf(this.value);">
 <span class='width3'>-9</span>
 <input class='width4' type="text" id="textInput1" value="">
 <script>
 function updateValue_Sf(val) {
 document.getElementById('textInput1').value = "Sf = " + val;
 }
 </script>
 </div>

方案二：使用Flex布局（更现代灵活的方式） #

如果希望布局更适配不同屏幕，推荐用Flex容器包裹每一行元素，自动分配空间实现对齐：

<style>
.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* 增加行间距提升可读性 */
}
.form-row label {
    flex: 0 0 220px; /* 固定label宽度 */
    text-align: right;
    padding-right: 10px;
}
.form-row input[type="range"] {
    flex: 1; /* 让滑块占据剩余空间 */
    max-width: 150px;
}
.form-row span {
    flex: 0 0 40px;
    text-align: center;
    margin: 0 10px;
}
.form-row input[type="text"] {
    flex: 0 0 100px;
}
</style>
<div id="right">
 <br><br><br>
 <div class="form-row">
    <label>R : [m] : 10 </label>
    <input class="slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" onchange="updateValue_R(this.value);">
    <span>40</span>
    <input type="text" id="textInput" value="">
 </div>
 <script>
 function updateValue_R(val) {
 document.getElementById('textInput').value = "R = " + val;
 }
 </script>
 <div class="form-row">
    <label>Sf : [mks : m/Pa] : -15 </label>
    <input class="slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" onchange="updateValue_Sf(this.value);">
    <span>-9</span>
    <input type="text" id="textInput1" value="">
 </div>
 <script>
 function updateValue_Sf(val) {
 document.getElementById('textInput1').value = "Sf = " + val;
 }
 </script>
 </div>

关键说明 #

• 方案一适合快速修改现有代码，通过固定元素宽度实现对齐；
• 方案二用Flex布局更灵活，响应式表现更好，适合中长期的布局维护；
• 你可以根据实际视觉需求调整各类元素的宽度数值，直到达到目标效果。

内容的提问来源于stack exchange，提问作者Peter Harris