Выравнивание базовой метки полей с базовым текстом в текстовых вводах

Question

Я показываю текстовые входы рядом с текстом некоторых меток в наборе полей. Я хотел бы, чтобы исходный текст текста в текстовых вводах совпал с базовым текстом метки. Я могу установить коэффициент вымывания padding-top для моих элементов .label, но содержимое моих элементов .value может содержать текст только для чтения, и это приведет к выравниванию выравнивания метки/значения для этих полей. Я также подозреваю, что для разных браузеров потребуются разные коэффициенты fudge из-за различий в высоте между полями ввода в браузерах.

Есть ли у кого-нибудь идеи, как я могу получить соответствие моих меток и исходных текстов текста? Мой текст ярлыка может охватывать несколько строк, и поэтому я хотел бы, чтобы любое решение учитывало это.

Вы можете увидеть живой пример следующего кода: http://jsbin.com/enobe3.

CSS

* { 
    font-family: sans-serif; 
    font-size: 13px; 
} 

.field { 
    clear: left; 
    padding-top: 5px; 
} 

.label { 
    float: left; 
    width: 90px; 
} 

.value { 
    margin-left: 90px; 
    padding-left: 10px; 
} 

HTML

<fieldset> 
    <div class="field"> 
     <div class="label">A short label</div> 
     <div class="value">Some text</div> 
    </div> 
    <div class="field"> 
     <div class="label">A long long long long long long long wrapping label</div> 
     <div class="value">Some text</div> 
    </div> 
    <div class="field"> 
     <div class="label">A short label</div> 
     <div class="value"><input value="Some text"/></div> 
    </div> 
    <div class="field"> 
     <div class="label">A long long long long long long long wrapping label</div> 
     <div class="value"><input value="Some text"/></div> 
    </div> 
</fieldset> 

Answer 1

Базовая проблема выравнивания связана с высотой линии по умолчанию для текстовых полей и поля ввода.

input поля имеют большую высоту по умолчанию для размещения отступов, границ и текста.

Я экспериментировал с HTML/CSS фрагменты кода и опубликовал свою версию на http://jsfiddle.net/audetwebdesign/EbuJH/

Я добавил некоторые цвета фона, некоторые отступы и поля, чтобы выделить блоки.

Ключом является установка свойства line-height, чтобы ваши метки и поля ввода имели одинаковое значение, 2,0 в моем примере.

.field { 
    clear: left; 
    padding: 5px 0; 
    background-color: lightgray; 
    overflow: auto; 
    margin-bottom: 5px; 
    line-height: 2.00; /* Key property */ 
} 

Вы можете отрегулировать высоту линии, чтобы понять, как она работает.

Я протестировал пример в Firefox и IE8, и результаты согласуются со строгим doctype.

Результат хорошо подходит для однострочных меток. Единственный недостаток заключается в том, что многострочные метки могут иметь больший интервал, чем вам нравится. Вы можете обойти это, поместив первую строку многострочной метки в диапазон и применяя высоту линии только к диапазону, но это дополнительная работа.

По крайней мере, мы знаем, что контролирует базовое позиционирование, поэтому мы можем добиться прогресса.