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

Question

为什么 JavaScript 在这个非常简单的代码中创建的输入出现在 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 也有错误..

为 input.genderButton 指定的通知 float.: left;。刚才才发现其实并没有应用float

所以这是应用了浮动的更新后 fiddle。

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

why do inputs created by javascript appear outside their divs?

html

javascript

css

css-float

看到这个fiddle