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

Posted 2023-02-23

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

【英文标题】：Aligning the baseline of field labels with the baseline of text in text inputs

【发布时间】：2011-03-07 03:27:26

【问题描述】：

我在字段集中的一些标签文本旁边显示文本输入。我希望文本输入中文本的基线与标签文本的基线对齐。我可以为我的.label 元素设置一个软糖因子padding-top，但我的.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>

【参考方案1】：

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

input 字段具有较大的默认高度以容纳填充、边框和文本。

我对您的 html/CSS 代码 sn-ps 进行了试验，并将我的版本发布在 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 一致。

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

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