Question

我知道这是基本的，我已经浪费了很多时间，阅读帖子，书籍等等，这并不重要：我只是不明白CSS是如何工作的......

我想在字段1）下面的字段2）采用以下形式：

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

正确地在表单中定位字段

1 个答案: