html - 表单未按预期显示

Question

我正在处理一个具有 5 个输入字段和一个提交按钮的表单，预计将显示为两行三列的表单字段。我得到的输出就像前两个输入字段在第一行中正确显示但其他三个元素已损坏。

My code:

<div id="form_div">
<form id="fm_form">
  <label>
      Date1<br />
      <input id="nn" name="dd" type="text" />
  </label>
  <label>
     Date2<br />
       <input id="kk" name="ff" type="text" />
  </label>
    <label>
    Vehicle<br />
    <select id="dd" style="">
      <option value="null">--text--</option>
    </select>
    </label>

    <label>
    Name<br />
    <select id="name" style="">
    <option value="null">--Name--</option>
    </select>
    </label>

    <label>
  Location<br />
  <select id="location" style="">
    <option value="null">--Location--</option>
  </select>
  </label>
  <label>
  <br />
  <input id="submit_btn" type="submit" value="SUBMIT">
  </label>
 </form>
 </div>

CSS:

#fm_form label
{
display:block;
float:left;
margin-right:21px;
vertical-align:top;
width: 210px;
/*padding:25px;*/
}

#fm_form input[type=text]  
{

height: 25px;
width: 210px;
}

#fm_form input[type=submit]
{

height: 30px;
width: 210px;
}


#fm_form select
{

height: 30px;
width: 210px;
}

#form_div, #fm_form{

height: 154px;
width: 696px;
border: solid 1px #ddd;
}

Answer 1

您正在使用花车。当你开始新的一行时，你需要清除它们。在两行之间插入以下内容:

<div style="clear: both"></div>

我还建议阅读 this进一步阅读 float 内容，以及如何清除它们。