为什么输入框后面的标签？

Question

即使在摆弄浮动变量之后，我也似乎无法弄清楚这一点。 “Q1”出现在标签后面：/

<div class="question active">Q1<input id="one" type="text"></div>


.question {
    display: none;
    float:left
}
.question.active,.question.answered {
    display: block;
    float: left;
    clear: left;

}
.question.active input {
    border: 1px solid black;
    float: left;
    clear: left;
}
.question.answered input {
    border: 0px solid black;
    float: left;
}
.button {
    display: none;
}
.button.active {
    display: block;
    float: left;
}
.clickbutton {
    clear: left;
    float: left;
}

.focusField{
    border:solid 2px #73A6FF;
    background:#EFF5FF;
    color:#000;
}

非常感谢：）

Answer 1

您的input还剩floated。

.question.active input {
    border: 1px solid black;
    float: left;
    clear: left;
}

这会将其放在.question.active div。

中的文字之前

如果您将 Q1 放在label中并且首先浮动，那么一切都会有效。