如何使所有滑块都在一条垂直线上？

Question

I Have a form that includes a label, slider and an output.
Different sizes of labels can mess the vertical organization of the slider (like in the link below).
dist

This is my code:

 function slider(name,item){ var label=document.createElement("label"); label.innerHTML = name+" rate for "+item; var form=document.createElement("form"); form.name="registrationForm"; form.className ="mainForm"; var input = document.createElement("input"); input.type="range"; input.name="ageInputName"; input.id="input"+name+item; input.value="50"; input.min="0"; var output = document.createElement("output"); output.name="ageOutputName"; output.id="output"+name+item; input.oninput=()=>updateTextInput(input.id,output.id); form.appendChild(label); form.appendChild(input); form.appendChild(output); output.value="50"; document.getElementById("container").appendChild(form); }

How can I fix this?

Answer 1

You can use css classes with attributes width and display:inline-block to achieve what you are looking for. Example In your javascript you can use input.classList.add('input');

HTML

.label {
  width:150px;
  background:#f7f7f7;
  display:inline-block;
  text-align:center;
}
.input {
  width:200px;
  display:inline-block;
}
.output {
  width:50px;
  background:#d7d7d7;
  display:inline-block;
}

-- if it has to be done in js you can always add styles in js to your elements

JS

slider('first', 'bag');
slider('second', 'box');
slider('third', 'floor');

function slider(name, item) {
  var label = document.createElement("label");
  label.innerHTML = name + " rate for " + item;
  label.classList.add("label");

  var form = document.createElement("form");
  form.name = "registrationForm";
  form.className = "mainForm";

  var input = document.createElement("input");
  input.type = "range";
  input.name = "ageInputName";
  input.id = "input" + name + item;
  input.value = "50";
  input.min = "0";
  input.classList.add('input');

  var output = document.createElement("output");
  output.name = "ageOutputName";
  output.id = "output" + name + item;
  output.classList.add('output');

  input.oninput = () => updateTextInput(input.id, output.id);

  form.appendChild(label);
  form.appendChild(input);
  form.appendChild(output);
  output.value = "50";
  document.getElementById("container").appendChild(form);

}

For a slightly more advanced method you could learn about css grid and flexbox .