HTML 表单 : use dl, dt, dd 用于布局表单输入，但会被下拉菜单扭曲

Question

我正在做一个网站。我有一个包含很多元素的表单。许多行在同一行中有两个或三个输入。

我使用 dl/dt/dd 按以下方式将表单输入排成一行:

<form>

<div class="clearfix">
    <dl style="float: left;">
      <dt>Field name</dt>
      <dd><input type="text" name="myname" ></dd>
    </dl>
    <dl style="float: left;">
      <dt>Field name</dt>
      <dd><input type="text" name="myname" ></dd>
    </dl>
</div>
....
many other rows withe same structure layout of inputs.

</form>

在我屏幕的左侧，我正在使用一个菜单，例如此页面上的菜单(我最近购买了这个主题)。菜单位于带有 float:left 的 div 中。表单位于右侧，margin-left: 200px。

奇怪的是，有一个很大的空间间隙将行分成两组。如果我打开和关闭一个菜单项，下面的行组会相应地上下移动。这是屏幕截图:

http://www.flickr.com/photos/31887466@N03/9162373253/lightbox/

如果我按以下方式每一行有一个输入元素:

<form>

<div>
    <dl>
      <dt>Field name</dt>
      <dd><input type="text" name="myname" ></dd>
    </dl>
</div>
....
many other rows withe same structure layout of inputs.

</form>

没有问题。

第一个布局设计中出现这种奇怪行为的原因是什么？如何解决这个问题？我希望使用这种方式来布局表单元素。

我正在使用 Bootstrap 2.3.2。

谢谢和问候!

干杯!

----更新------

有人建议我不要使用 float 因为我使用的是 bootstrap。这是我在同一行布置表单输入元素的新方法。我有很多类似的行。但是，我仍然遇到同样的问题:

<div class="controls controls-row">
    <dl class="span4">
        <dt><label for="website">Website</label>
            <input type="text"  class="input-xlarge" name="website" id="website">           
        </dt>
        <dd class="fieldErr">error message </dd>
    </dl>  
    <dl class="span4">
        <dt><label for="website">Website</label>
            <input type="text" class="input-xlarge" name="website" id="website">            
        </dt>
        <dd class="fieldErr">error message</dd>
    </dl>   
</div>

----更新 2 ----

我按照 bootstrap 的建议尝试了“每行多个 gird 输入”

http://twitter.github.io/bootstrap/base-css.html

，我仍然遇到同样的显示问题:

<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span1" type="text" placeholder=".span1">
</div>

(重复上述结构的多行)

----更新 3 ----

以下两个结构也不起作用:

<div class="row">
    <div class="span4">
        <dl>
            <dt><form:label path="website" >111<spring:message code="label.website"/></form:label>
                <form:input path="website" class="input-xlarge"/>           
            </dt>
            <dd class="fieldErr"><form:errors path="website"/></dd>
        </dl>       
    </div>
    <div class="span4">
        <dl>
            <dt><form:label path="website" >111<spring:message code="label.website"/></form:label>
                <form:input path="website" class="input-xlarge"/>           
            </dt>
            <dd class="fieldErr"><form:errors path="website"/></dd>
        </dl>   
    </div>
</div>


---------------

<div class="row">
  <div class="span8">
    <div class="row">
      <div class="span4">
                <dl>
                    <dt><form:label path="website" >111<spring:message code="label.website"/></form:label>
                        <form:input path="website" class="input-xlarge"/>           
                    </dt>
                    <dd class="fieldErr"><form:errors path="website"/></dd>
                </dl>   
      </div>
      <div class="span4">
                <dl>
                    <dt><form:label path="website" >111<spring:message code="label.website"/></form:label>
                        <form:input path="website" class="input-xlarge"/>           
                    </dt>
                    <dd class="fieldErr"><form:errors path="website"/></dd>
                </dl>         
      </div>
    </div>
  </div>
</div>

Answer 1

<div class="row">
  <div class="span9">
    Level 1 column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>

您应该在 div span6 中放置一个 dl，在 div span3 中放置一个 dl。之后随时重新格式化。