html - 无法在 html 表单下方插入更多 html 标签

Question

我有一个位于 div 中的表单，我想做的是在该表单下放置一个表格以显示一些结果。问题是，如果我在浏览器中的表单代码之后写任何标签，它会显示在表单的右侧而不是表单下方。我需要做什么？这是CSS的东西吗？这是 html 代码和 CSS:

<div style="width:55%;height:auto;margin-right:0px;" class="BuscarCliente">
  <form class="buscarForm" name="buscarClienteForm" method="get">
       <label class="formTitle">Buscar Cliente</label>
       <br><br>
       <label class="buscarForm">Ingresa el nombre del cliente a buscar:</label><br>
       <input class="buscarForm" style="width:200px;margin-top:7px;"type="text" name="nombre_cliente"><br><br>
       <input class="buscarForm" type="button" value="Buscar Cliente" onClick="JAVASCRIPT:form.submit()">
    </form>  

   <br><br><span>THIS STUFF SHOULD BE BELOW</span>
</div>

这是CSS

form.buscarForm{
   color:#486288;
   font-family: 'Source Sans Pro', Helvetica, sans-serif;
   font-size:16px;
   font-weight: 200;
   margin-left:35px;
   margin-top: 15px;
   float: left;
}

Answer 1

你的 float: left; css 规则指示浏览器将您的表单布局为 float 。它之后的任何东西都会显示在右边，除非它太大而不适合。如果不需要，您可以删除该规则，或者您需要使用 clear: both; 来设置下一个元素的样式。 CSS 规则。

此外，<span>默认情况下标签显示为内联，因此您还需要一个 block 元素来跟在具有 clear: both; 的 float 表单之后。规则。 <div>是一个普通的 block 元素。

这是一种方法:http://jsfiddle.net/HgWgT/