Использование Divs / Layers с Fieldsets / Legends

Question

Я строю форму.Я использовал div с абсолютным позиционированием, чтобы определить расположение моей формы.Сейчас я пытаюсь поместить formset вокруг каждой группы div, проблема в том, что formset создает линию, но она не растягивается на все div - я предполагаю, что они расположены абсолютно.Вот пример моего кода:

<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 может стать очень неприятным, когда вам придется изменить дизайн. Вместо этого используйте классы.