javascript - 如何对齐 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>

但这会产生以下结果:

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

感谢您的帮助!

编辑:我想做的是:

Answer 1

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

将每一行包裹在 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 demo

然后你可以进行一些小的调整(例如给 .width3 元素一个 text-align: right)

---

结果