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以进一步阅读花车，以及如何清除它们。

表格未按预期显示

1 个答案: