将 Div/Layers 与字段集/图例结合使用

Question

我正在构建一个表单。我使用具有绝对定位的 div 来确定表单的布局。我现在尝试在每组 div 周围放置一个表单集，问题是表单集创建一条线，但它不会延伸到所有 div - 我猜测 b/c 它们是绝对定位的。这是我的代码的示例：

<div>
    <fieldset id="BasicInfo">
    <legend>Basic Info.</legend>
    <div id="first_name" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 13px; top: 82px">
        First Name:</div>
    <div id="first_name_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 136px; top: 82px">
    </div>
    <div id="last_name" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 313px; top: 82px">
        Last Name:</div>
    <div id="last_name_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 435px; top: 82px">
    </div>
    <div id="gender" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 613px; top: 82px">
        Gender:</div>
    <div id="gender_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 738px; top: 82px">
    </div>
    <div id="dob" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 14px; top: 120px">
        Date of Birth:
    </div>
    <div id="dob_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 136px; top: 120px">
    </div>
    <div id="age" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 313px; top: 120px">
        Age:</div>
    <div id="age_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 435px; top: 120px">
    </div>
    <div id="intended_major" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 613px; top: 120px">
        Intended Major:</div>
    <div id="intended_major_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 738px; top: 120px">
    </div>
    <div id="email" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 13px; top: 162px">
        Email:</div>
    <div id="email_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 136px; top: 162px">
    </div>
    <div id="phone" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 313px; top: 162px; right: 561px;">
        Phone:</div>
    <div id="phone_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 435px; top: 162px">
    </fieldset>
    </div>

Answer 1

你猜对了。绝对定位使元素脱离正常流，并将其定位在相对于设置了 position:relative 的容器父级的 top:0;left:0 位置- 如果没有设置position:relative，它是相对于body的。如果您没有为父 div 定义高度，它将获得 0（或 1px 或默认字体大小高度 - 取决于您使用的浏览器）。我不认为需要绝对定位。

尝试这样的事情：

/* css */
.label {float:left;width:auto;}
.input {float:left;width:auto;}
.clear {clear:both;height:1px;font-size:1px;line-height:1px;} /* 1px line clear */

/* html */

<form>
<fieldset>
<div class="field">
<div class="label"><label>Username:</label></div>
<div class="input"><input type="text" /></div>
<div class="clear"></div>
</div>
</fieldset>
</form>

我经常使用这种布局来构建复杂的表单，因为您可以轻松地包含验证器、提示和其他附加元素（如果需要）。
一旦你必须改变设计，编写内联 CSS 也会变得非常糟糕。使用类来代替。