Как выровнять с помощью 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>

Но это дает следующий результат:

И на самом деле, я просто хочумой ввод типа range выровнять, как и другие входы.Я безуспешно пытался увеличить поля справа от метки.

Спасибо за вашу помощь!

РЕДАКТИРОВАТЬ: я хотел бы сделать следующее:

Answer 1

Из-за ограниченной поддержки браузера 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>

Answer 2

Вы можете просто создать таблицу и строку, чтобы они идеально совпали, как показано ниже.

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

Вы должны добавить фиксированный width в CSS для правильного выравнивания ваших элементов.

См. Комментарии в этом рабочем фрагменте для других предложений:
(я переместил часть вашего кода, чтобы сделатьФрагмент кода (лучше)

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

Вероятно, самый быстрый способ - использовать макет 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

Затем вы можете выполнить некоторые незначительные корректировки (например, датьtext-align: right к элементу .width3)

---

Результат

Answer 5

Вы можете использовать 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>