Как выровнять текст и ввод?

Question

У меня есть этот код с использованием HTML:

<div id = "right">
<br /><br /><br />

<br />Parameter 1 : 10 <input type="range" min="10" max="40" step="0.01" value="10" class="slider" id="myRange" onchange="updateValue_Parameter_1(this.value);"> 40
<input type="text" id="textInput" value="">
<script>
function updateValue_Parameter_1(val) {document.getElementById('textInput').value="Parameter 1 = "+val;}
</script>

<br />Parameter 2 : -15 <input type="range" min="-15" step="0.01" max="-9" value="-15" class="slider" id="myRange1" onchange="updateValue_Parameter_2(this.value);"> -9
<input type="text" id="textInput1" value="">
<script>
function updateValue_Parameter_2(val) {document.getElementById('textInput1').value="Parameter 2 = "+val;}
</script>

<br />  Parameter 3 : -15 <input type="range" min="-15" step="0.01" max="-9" value="-15" class="slider" id="myRange2" onchange="updateValue_Parameter_3(this.value);"> -9
<input type="text" id="textInput2" value="">
<script>
function updateValue_Parameter_3(val) {document.getElementById('textInput2').value="Parameter 3 = "+val;}
</script>

<br />Parameter 4 : 7 <input type="range" min="7" max="9" value="7" step="0.01" class="slider" id="myRange3" onchange="updateValue_Parameter_4(this.value);"> 9
<input type="text" id="textInput3" value="">
<script>
function updateValue_Parameter_4(val) {document.getElementById('textInput3').value="Parameter 4 = "+val;}
</script>

<br />Parameter 5 : -8 <input type="range" min="-8" max="-5" step="0.01" value="-8" class="slider" id="myRange4" onchange="updateValue_Parameter_5(this.value);"> -5
<input type="text" id="textInput4" value="">
<script>
function updateValue_Parameter_5(val) {document.getElementById('textInput4').value="Parameter 5 = "+val;}
</script>

<br />Parameter 6 : 0 <input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="myRange5" onchange="updateValue_Parameter_6(this.value);"> 1
<input type="text" id="textInput5" value="">
<script>
function updateValue_Parameter_6(val) {document.getElementById('textInput5').value="Parameter 6 = "+val;}
</script>

<br />Parameter 7 : 100 <input type="range" min="100" max="6000" step="0.01" value="100" class="slider" id="myRange6" onchange="updateValue_Parameter_7(this.value);"> 6000
<input type="text" id="textInput6" value="">
<script>
function updateValue_Parameter_7(val) {document.getElementById('textInput6').value="Parameter 7 = "+val;}
</script>

<br />Parameter 8 : 0 <input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="myRange7" onchange="updateValue_Parameter_8(this.value);"> 1
<input type="text" id="textInput7" value="">
<script>
function updateValue_Parameter_8(val) {document.getElementById('textInput7').value="Parameter 8 = "+val;}
</script>

<br />Parameter 9 : 5 <input type="range" min="5" max="20" step="0.01" value="5" class="slider" id="myRange8" onchange="updateValue_Parameter_9(this.value);"> 20
<input type="text" id="textInput8" value="">
<script>
function updateValue_Parameter_9(val) {document.getElementById('textInput8').value="Parameter 9 = "+val;}
</script>

</div>  

, который дает следующий результат:

И я хотел бычтобы выровнять ввод диапазона типа по левому краю и ввод текста по левому краю, но я не знаю, как это сделать?Я пытаюсь с помощью margin-left, но это дает неправильный результат ...

Answer 1

Мое решение: Демонстрация JSFiddle .

Я использовал Flexbox и flex-basis, чтобы дать каждому элементу собственную ширину, чтобы они быливыровнен аккуратно.Каждый фрагмент вашего кода теперь обернут в элемент (labels для текста), чтобы их можно было стилизовать.

Я также очистил и сдвинул HTML, чтобы все было легче читать.

Позвольте мне отметить, что использование Flex делает это отзывчивым, и вы можете изменить фиксированный width контейнера, как вам нравится, а также flex-basis, который контролируетраспределенное пространство по всей ширине родительского элемента / контейнера.

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.container {
  width: 600px;
  margin-top: 30px;
}

.line {
  display: flex;
  justify-content: space-between;
}

.line label:nth-of-type(1) {
  flex-basis: 25%;
}

.line input.slider {
  flex-basis: 25%;
}

.line label:nth-of-type(2) {
  flex-basis: 10%;
}

.line input[type=text] {
  flex-basis: 25%;
}

<div class="container">
  <div class="line">
    <label for="myRange">Parameter 1 : 10</label> 
    <input type="range" min="10" max="40" step="0.01" value="10" class="slider" id="myRange" onchange="updateValue_Parameter_1(this.value);"> 
    <label>40</label>
    <input type="text" id="textInput" value="">
    <script>
      function updateValue_Parameter_1(val) {
        document.getElementById('textInput').value = "Parameter 1 = " + val;
      }
    </script>
   </div>

   <div class="line">
    <label for="myRange1">Parameter 2 : -15 </label>
    <input type="range" min="-15" step="0.01" max="-9" value="-15" class="slider" id="myRange1" onchange="updateValue_Parameter_2(this.value);">
    <label>-9</label>
    <input type="text" id="textInput1" value="">
    <script>
      function updateValue_Parameter_2(val) {
        document.getElementById('textInput1').value = "Parameter 2 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange2">Parameter 3 : -15 </label>
    <input type="range" min="-15" step="0.01" max="-9" value="-15" class="slider" id="myRange2" onchange="updateValue_Parameter_3(this.value);">
    <label>-9</label>
    <input type="text" id="textInput2" value="">
    <script>
      function updateValue_Parameter_3(val) {
        document.getElementById('textInput2').value = "Parameter 3 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange3">Parameter 4 : 7 </label>
    <input type="range" min="7" max="9" value="7" step="0.01" class="slider" id="myRange3" onchange="updateValue_Parameter_4(this.value);">
    <label>9</label>
    <input type="text" id="textInput3" value="">
    <script>
      function updateValue_Parameter_4(val) {
        document.getElementById('textInput3').value = "Parameter 4 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange4">Parameter 5 : -8 </label>
    <input type="range" min="-8" max="-5" step="0.01" value="-8" class="slider" id="myRange4" onchange="updateValue_Parameter_5(this.value);">
    <label>-5</label>
    <input type="text" id="textInput4" value="">
    <script>
      function updateValue_Parameter_5(val) {
        document.getElementById('textInput4').value = "Parameter 5 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange5">Parameter 6 : 0 </label>
    <input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="myRange5" onchange="updateValue_Parameter_6(this.value);">
    <label>1</label>
    <input type="text" id="textInput5" value="">
    <script>
      function updateValue_Parameter_6(val) {
        document.getElementById('textInput5').value = "Parameter 6 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange6">Parameter 7 : 100</label>
    <input type="range" min="100" max="6000" step="0.01" value="100" class="slider" id="myRange6" onchange="updateValue_Parameter_7(this.value);">
    <label>6000</label>
    <input type="text" id="textInput6" value="">
    <script>
      function updateValue_Parameter_7(val) {
        document.getElementById('textInput6').value = "Parameter 7 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange7">Parameter 8 : 0</label> 
    <input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="myRange7" onchange="updateValue_Parameter_8(this.value);">
    <label>1</label>
    <input type="text" id="textInput7" value="">
    <script>
      function updateValue_Parameter_8(val) {
        document.getElementById('textInput7').value = "Parameter 8 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange8">Parameter 9 : 5</label> 
    <input type="range" min="5" max="20" step="0.01" value="5" class="slider" id="myRange8" onchange="updateValue_Parameter_9(this.value);">
    <label>20</label>
    <input type="text" id="textInput8" value="">
    <script>
      function updateValue_Parameter_9(val) {
        document.getElementById('textInput8').value = "Parameter 9 = " + val;
      }
    </script>
  </div>
</div>

Answer 2

Самое простое решение - установить фиксированную ширину для каждого «столбца».Таким образом, они будут хорошо выровнены.

<label class='width1'>Parameter 1 : 10 </label>
<input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10"  id="myRange" onchange="updateValue_Parameter_1(this.value);">
<span class='width3'>40</span>
<input class='width4' type="text" id="textInput" value="" >

и ваш css (например)

.width1 {
 width: 100px;
}
.width2 {
width: 150px;
}
.width3 {
width: 20px;
}
.width4 {
width: 80px;
}

Таким образом, они все выровняются.

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

Или поместите все значения в таблицу HTML.

Или вы можете использовать Flexbox с justify-content:space-between;, но это может быть немного сложно.