0

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

我正在使用 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>

没有问题。

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

我正在使用引导程序 2.3.2。

谢谢并恭祝安康！

干杯!

- - 更新 - - -

由于我使用引导程序，有人建议我不要使用浮点数。这是我在同一行上布置表单输入元素的新方法。我有很多类似的行。但是，我仍然遇到同样的问题：

<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 ----

正如引导程序所建议的那样，我尝试了“每行多个网格输入”

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>
4

2 回答 2

1

我无法解释，但我将表单输入包装到了几个字段集中。然后显示就ok了。我在表单中有几个部分，每个部分都使用一个字段集。这很奇怪，但有效。

希望这对其他人有帮助。

干杯。

于 2013-06-30T18:28:56.377 回答
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。之后随意重新格式化。

于 2013-06-29T03:51:54.917 回答