Text 和 Input 不在同一行

Question

我正在尝试为一个项目创建一个 "on an off switch"，我可以在其中获取一组元素的问卷。当你运行下面的代码时，你会看到一个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);

P.S - 关键字 'fem' 和 'demChoosing' 没有任何意义

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

Text 和 Input 不在同一行

Text and Input are not on the same line

javascript

checkbox

createelement