在字段集/圖例中使用div /圖層

Question

我在構建表單。我用絕對定位的div來確定我的表單的佈局。我現在試圖在每個div組中放置一個formset，問題是formset創建了一條線，但它並沒有覆蓋所有的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

你猜對了。絕對定位使元素超出正常流程，並將其置於其自己的級別top:0;left:0相對於具有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也會變得非常討厭。改用類。