將字段標籤的基線與文本輸入中的文本基線對齊

我在字段集中的某些標籤文本旁邊顯示文本輸入。我希望文本輸入中的文本基線與標籤文本的基線對齊。我可以爲我的.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>

來源

2010-06-23 Simon Lieschke

基線對齊問題是關係到默認的行高度爲文本框和輸入字段。

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中測試了這個例子，結果與嚴格的文檔類型一致。

該結果適用於單行標籤。其中一個缺點是多行標籤的間距可能比您想要的要多。您可以通過將多行標籤的第一行放在一個範圍內並將行高僅應用於範圍來解決此問題，但這是額外的工作。

至少我們知道了解什麼控制了基線定位，所以我們可以取得進展。

來源

2011-03-02 16:12:18

將字段標籤的基線與文本輸入中的文本基線對齊

回答

相關問題