javascript - 文本和输入不在同一行

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”没有任何意义

标签： javascriptcheckboxcreateelement

Answer 1

原因很简单：p元素被渲染为块元素。所以他们使用整个可用宽度。您可以尝试将显示类型设置为“inline”或“inline-block”以将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);