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规则指示浏览器将您的表单布局为浮动。除非它太大而不适合，否则它之后出现的任何东西都会向右显示。如果您不需要，可以删除该规则，或者您需要使用clear: both; css规则设置下一个元素的样式。

此外，<span>标记默认显示内联，因此您还需要一个块元素来处理具有clear: both;规则的浮动表单。 <div>是一个常见的块元素。

以下是一种方法：http://jsfiddle.net/HgWgT/

Answer 2

将style="clear: both;添加到表格后的下一个元素，然后它将位于左侧。

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

2 个答案: