文字和输入不在同一行

Question

我正在尝试为一个项目创建“关闭开关”，从中可以得到一组元素的调查表。 当您运行以下代码时，您将看到一个div出现在屏幕上的一组元素中。 文本在复选框上方，我需要它们并排放置。 有任何想法吗？

 var bigDiv = document.createElement("div") var fem = document.createElement("P"); var t = document.createTextNode("FooText"); var femI = document.createElement("INPUT"); bigDiv.style.display = 'block'; fem.appendChild(t); bigDiv.appendChild(fem); femI.setAttribute("type", "checkbox"); bigDiv.appendChild(femI); bigDiv.setAttribute("id", "demChoosing") document.body.appendChild(bigDiv); 

PS-关键字“ fem”和“ demChoosing”没有任何意义

Answer 1

原因很简单： p元素呈现为块元素。 因此，他们使用整个可用宽度。 您可以尝试将显示类型设置为“内联”或“内联块”，以将p标签和input标签放在同一行中。

 var bigDiv = document.createElement("div") var fem = document.createElement("P"); var t = document.createTextNode("FooText"); var femI = document.createElement("INPUT"); bigDiv.style.display = 'block'; fem.appendChild(t); bigDiv.appendChild(fem); femI.setAttribute("type", "checkbox"); fem.setAttribute('style', 'display: inline-block;') bigDiv.appendChild(femI); bigDiv.setAttribute("id", "demChoosing") document.body.appendChild(bigDiv);