Wyrównanie linii bazowej etykiet pól z linią bazową tekstu na wejściach tekstowych

Question

Wyświetlane są wpisy tekstowe obok tekstu etykiety w zestawie pól. Chciałbym, aby linia bazowa tekstu w tekstach wejściowych była zgodna z linią bazową tekstu etykiety. Mogłabym ustawić współczynnik krówki padding-top dla moich elementów .label, ale zawartość moich elementów .value może zawierać tekst tylko do odczytu, co z kolei spowodowałoby wyrównanie linii bazowej etykiety/wartości dla tych pól. Podejrzewam również, że różne czynniki krówki będą wymagane w różnych przeglądarkach ze względu na różnice wysokości między polami wprowadzania danych w różnych przeglądarkach.

Czy ktoś ma jakieś pomysły, w jaki sposób mogę uzyskać etykietę i wprowadzić bazowe dane tekstowe w celu dostosowania? Tekst mojej etykiety może obejmować wiele wierszy i dlatego chciałbym, aby jakakolwiek metoda wzięła to pod uwagę.

Możesz zobaczyć przykład na żywo następujący kod na 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

Linia bazowa wyrównanie kwestia jest związana z wysokością domyślną dla linii pola tekstowe i pola wejściowego.

pola mają większą domyślną wysokość, aby pomieścić wypełnienie, obramowanie i tekst.

eksperymentowałem ze swoimi HTML/CSS fragmentów kodu i pisał swoją wersję na http://jsfiddle.net/audetwebdesign/EbuJH/

dodałem pewne kolory tła, jakieś dopełnienie i marginesy nakreślić bloków.

Kluczem jest ustawienie właściwości line-height, aby etykiety i pola wejściowe miały taką samą wartość, 2.0 w moim przykładzie.

.field { 
    clear: left; 
    padding: 5px 0; 
    background-color: lightgray; 
    overflow: auto; 
    margin-bottom: 5px; 
    line-height: 2.00; /* Key property */ 
} 

Można dostosować wysokość linii, aby uzyskać informacje na temat jej działania.

Testowałem przykład w Firefoksie i IE8, a wyniki są zgodne ze ścisłym doctype.

Wynik działa dobrze w przypadku etykiet jednokreskowych. Jedną wadą jest to, że etykiety wielowierszowe mogą mieć więcej odstępów niż Ty. Można to obejść, umieszczając pierwszą linię wielowierszowej etykiety w przęśle i stosując wysokość linii tylko do rozpiętości, ale to jest dodatkowa praca.

Przynajmniej wiemy, co kontroluje pozycjonowanie bazowe, więc możemy robić postępy.