Question

为什么JavaScript在这个非常简单的代码中创建的输入出现在div下面而不是在div里面？

HTML：

<div id="magicButtonDiv">
    <p>I am filler text</p>
</div>

JavaScript的：

function makeButton() //Activated when a button in another part of the page is pressed
{
    var text = "";
    text += "<p>What is your gender?</p>";
    text += "<input type='button' class='genderButton' value='male' onClick='maleFunction'/>";
    text += "<input type='button' class='genderButton' value='female' onClick='femaleFunction'/>";
    document.getElementById("magicButtonDiv").innerHTML=text;
}

CSS：

#magicButtonDiv
{
    box-sizing         : border-box;
    -moz-box-sizing    : border-box;
    -webkit-box-sizing : border-box;
    border             : 1px solid #000000;
}

input.genderButton
{
    float.      : left;
    margin-left : 2%;
    width       : 47%;
}

还有更多代码，但我认为错误是代码的这一部分。

Answer 1

将float:left的样式规则添加到#magicbuttondiv。它将解决问题

Answer 2

请参阅此fiddle

您的Javascript中有很多错误。请用下面给出的一个

替换你的Javascript

function makeButton() {
    var text = "";
    text += "<p>What is your gender?</p>";
    text += "<input type='button' class='genderButton' value='male' onClick='maleFunction()'>";
    text += "<input type='button' class='genderButton' value='female' onClick='femaleFunction()'>";
    document.getElementById("magicButtonDiv").innerHTML = text;
}

<强>更新

我刚刚发现你的CSS也有错误。

请注意为float.: left;指定的input.genderButton。刚刚意识到实际上没有应用浮动。

所以这里是应用了浮点数的更新fiddle。

为什么javascript创建的输入出现在他们的div之外？

2 个答案:

请参阅此fiddle