html - 正确定位表单中的字段

Question

我知道这是基本的，我已经在这上面浪费了几个小时，阅读帖子、书籍等，但这没关系:我只是不明白 CSS 是如何工作的...

我希望字段 2) 位于字段 1) 的下方，格式如下:

<label>1) Select date</label>
<p>
    <select name="data" id="data" form="configs">
        <option value="custom">Custom</option>
        <option value="thismonth">This Month</option>
        <option value="lastmonth">Last Month</option>
        <option value="ytd">Year to Date</option>
    </select>
</p>
<div id="frombox">
    <label for="from">From</label>
    <br \>
    <input type="text" class="box" name="from">
</div>
<div id="tobox">
    <label for="to">To</label>
    <br \>
    <input type="text" class="box" name="to">
</div>


<label>2) Select fields to import</label>
<p>
    <input type="text " name="datepicker " id="datepicker " required/>
</p>

使用 CSS:

#frombox {
    float:left;
    margin-left: 5px;
    width: 150px;
}
#tobox {
    float:left;
    margin-left: 5px;
    width: 150px;
}
.box {
    width: 100px;
}

您可能会看到一个实例 here

Answer 1

试试这个

http://jsfiddle.net/isqware/y3mf4q2j/

#frombox {
float:left;
margin-left: 5px;
width: 150px;
}
#tobox {
float:left;
margin-left: 5px;
width: 150px;
clear:both;
}
.box {
width: 100px;
}
label {
clear: both;
display: block;
}