Свертывание полей CSS (разрешить внутреннее разрушение, запретить внешнее разрушение) - PullRequest
Новая
       10

Свертывание полей CSS (разрешить внутреннее разрушение, запретить внешнее разрушение)

0 голосов
/ 22 декабря 2011

У меня есть следующая структура: 

<div class="form-item">
 <label>Label</label>
 <input type="text" value="" size="23">
 <div class="description">
   <div class="msg">*Some description</div>
   <div class="msg">Error</div>
 </div>
</div>

Есть много элементов формы.Мне нужно, чтобы поля надписей и описаний были свернуты вместе с родительским элементом (форма-элемент) И НЕ ДОЛЖНЫ свернуться два поля элементов формы.

Зачем мне это нужно?Ну, я бы использовал padding, но label и description являются необязательными, поэтому они должны иметь отступ, который должен свернуться вместе с parent.Более того, описание может содержать ноль (скрытое) для многих сообщений, которые ДОЛЖНЫ сворачиваться с полем описания, и все поле должно быть невидимым, если все сообщения скрыты.

Ps Мне нужна поддержка IE7:)

Редактировать Базовое css: 

.form-item{
    margin: 7px 0 10px;
}
.form-item legend{
    margin: 5px 0;
}
.form-item .description{
    margin: 2px;
}
.description .msg{
    margin: 1px 0;
}

Суммировать:

  1. Пробел между двумя элементами формы: 17px (поля не сворачиваются);
  2. Верхнее поле формы полей: 7px (5px свернуть с 7px);
  3. Нижнее поле формы поля: 10px (2px свернуть с 10px);
...