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

Question

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

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

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

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