Question

我正在建立一个表格。我使用绝对定位的div来确定我的表单的布局。我现在正试图在每组div之间放置一个formset，问题是formset创建了一条线，但它并没有延伸到所有divs - 我猜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

你猜对了。绝对定位将元素从正常流中取出，并将其置于top:0;left:0相对于具有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可能会变得非常讨厌。改为使用类。

使用带有Fieldsets / Legends的Div / Layers

1 个答案: