Html 将字段标签的基线与文本输入中文本的基线对齐

我在字段集中的某个标签文本旁边显示文本输入。我希望文本输入中的文本基线与标签文本的基线对齐。我可以为我的

.label

元素设置一个模糊因子

padding top

，但我的

.value

元素的内容可能包含只读文本，这将破坏这些字段的标签/值基线对齐。我还怀疑，由于不同浏览器输入字段之间的高度差异，不同的浏览器需要不同的伪造因素

是否有人知道如何使标签和输入文本基线对齐？我的标签文本可能跨越多行，因此我希望任何解决方案都能考虑到这一点

您可以在下面的代码中看到一个实例

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>

短标签
一些文本
长包装标签
一些文本
短标签
长包装标签

基线对齐问题与文本框和输入字段的默认行高有关

输入

字段具有更大的默认高度，以适应填充、边框和文本

我尝试了你的HTML/CSS代码片段，并将我的版本发布在

我添加了一些背景色、一些填充和边距来勾勒这些块的轮廓

关键是设置

行高

属性，以便标签和输入字段具有相同的值，在我的示例中为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一致

该结果适用于单行标签。一个缺点是多行标签的间距可能比您喜欢的大。您可以通过将多行标签的第一行放在跨距中并仅将线高度应用于跨距来解决此问题，但这是额外的工作

至少我们知道是什么控制基线定位，这样我们才能取得进展