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

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中测试了这个例子,结果与严格的doctype一致.

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

至少我们知道什么控制了基线定位,所以我们可以取得进展.