Css 将div/图层与字段集/图例一起使用

我正在构建一个表单。我使用带绝对定位的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>

基本信息。
名字：
姓氏：
性别：
出生日期:
年龄：
预期专业：
电邮：
电话：

您猜对了。绝对定位使元素脱离正常流动，并将其定位在

top:0的自身级别上；左：0

relative设置了

position:relative

的容器父容器-如果未设置position:relative，则它是相对于主体的。如果不为父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*/
.label{float:left；width:auto；}
.input{float:left；width:auto；}
.clear{clear:两者；高度：1px；字体大小：1px；行高：1px；}/*1px行清除*/
/*html*/
用户名：

我经常使用这种布局来构造复杂的表单，因为如果需要的话，可以轻松地包含验证器、提示和其他附加元素。 此外，一旦你不得不改变设计，写内联css会变得非常糟糕。改用类