如何与CSS输入和标签对齐

Question

我有使用html的这段代码：

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

但这会产生以下结果：

实际上，我只想让类型范围的输入像其他输入一样对齐。 我试图增加标签的页边距权利，但没有成功。

谢谢您的帮助！

编辑：我想做的是这样的：

Answer 1

可能最快的方法是使用Grid布局，这也可以在不使用媒体查询的情况下很好地适应视口。

将每行包装在div元素中

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

并把这种样式给包装器

div {
  display: grid;
  grid-template-columns: 150px minmax(100px, 1fr) 50px minmax(50px, .25fr);
  grid-gap: 1vw;
}

---

Codepen示范

然后，您可以进行一些细微的调整（例如，在.width3元素上输入text-align: right ）

---

结果

Answer 2

您可以使用display: inline-block; and vertical-align: middle; display: inline-block; and vertical-align: middle; 为了这。 检查下面的更新的片段...

 label, input, span { display: inline-block; vertical-align: middle; } .width1 { width: 150px; } .width3 { width: 30px; } 

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

Answer 3

您必须要在CSS中添加固定width才能正确对齐元素。

有关其他建议，请参见此工作段中的评论：
（我将您的一些代码移到了使代码片段更整齐/更清晰的位置）

 // Modified this to get only one "function", and removed inline JavaScript var sliders = document.querySelectorAll('.slider'); sliders.forEach(function() { this.addEventListener("change", function(event) { var elm = event.target; sliderText = elm.nextElementSibling.nextElementSibling; // Target the input tag sliderText.value = elm.getAttribute("prefix") + ' = ' + elm.value; }); }); 

 #right *[class^="width"] { /* Target all elements starting with "width" in #right */ border: 1px solid #ccc; /* Added to make it visual */ vertical-align: middle; /* Better layout with this */ display: inline-block; /* The widths below won't work without this */ } .width1 { /* This is what you need */ width: 130px; } .width3 { /* You must want to add this too */ width: 30px; text-align: center; } 

 <div id="right"> <label class='width1'>R : [m] :</label> <span class='width3'>10</span><!-- Modified here --> <input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" prefix="R"> <span class='width3'>40</span> <input class='width4' type="text" value=""> <br /> <label class='width1'>Sf : [mks : m/Pa] :</label> <span class='width3'>-15</span><!-- Modified here --> <input class="width2 slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" prefix="Sf"> <span class='width3'>-9</span> <input class='width4' type="text" value=""> </div> 

希望能帮助到你！

Answer 4

您可以简单地使表和行使其完全对齐，如下面的代码所示。

 <div id="right"> <br><br><br> <table> <tr> <td> <label class='width1'>R : [m] : 10 </label> </td> <td> <input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" onchange="updateValue_R(this.value);"> </td> <td> <span class='width3'>40</span> </td> <td> <input class='width4' type="text" id="textInput" value=""> </td> <script> function updateValue_R(val) { document.getElementById('textInput').value = "R = " + val; } </script> </tr> <tr> <td> <label class='width1'>Sf : [mks : m/Pa] : -15 </label> </td> <td> <input class="width2 slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" onchange="updateValue_Sf(this.value);"> </td> <td> <span class='width3'>-9</span> </td> <td> <input class='width4' type="text" id="textInput1" value=""> </td> <script> function updateValue_Sf(val) { document.getElementById('textInput1').value = "Sf = " + val; } </script> </tr> </table> </div> 

Answer 5

由于浏览器对display: grid （CSS Grid）的支持有限，我建议您使用Flexbox以这种方式进行操作。

 * { box-sizing: border-box; } .row { display: flex; } .row label { min-width: 150px; } .row span { min-width: 20px; } .row input { margin-left: 20px; } input { width: 100%; } 

 <div class="row"> <label class='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> <div class="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_R(val) { document.getElementById('textInput').value = "R = " + val; } function updateValue_Sf(val) { document.getElementById('textInput1').value = "Sf = " + val; } </script>