如何使所有滑塊都在一條垂直線上？

Question

我有一個包含 label、slider 和 output 的表格。
不同大小的標簽會弄亂 slider 的垂直組織（如下面的鏈接）。
距離

這是我的代碼：

 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); }

我怎樣才能解決這個問題？

Answer 1

您可以使用 css 具有屬性 width 和 display:inline-block 的類來實現您正在尋找的內容。 示例在您的 javascript 中，您可以使用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;
}

-- 如果它必須在 js 中完成，你總是可以在 js 中添加 styles到你的元素

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

}

對於稍微高級的方法，您可以了解css 網格和flexbox 。