Căn chỉnh đường cơ sở của nhãn trường với đường cơ sở của văn bản trong đầu vào văn bản

Question

Tôi hiển thị đầu vào văn bản bên cạnh một số văn bản nhãn trong một fieldset. Tôi muốn đường cơ sở của văn bản trong văn bản đầu vào để xếp hàng với đường cơ sở của văn bản nhãn. Tôi có thể thiết lập một yếu tố fudge padding-top cho các thành phần .label của tôi nhưng nội dung của các phần tử .value của tôi có thể chứa văn bản chỉ đọc và điều này sẽ làm tăng tính căn chỉnh của nhãn/giá trị cho các trường đó. Tôi cũng nghi ngờ các yếu tố fudge khác nhau sẽ được yêu cầu cho các trình duyệt khác nhau vì sự khác biệt về chiều cao giữa các trường nhập trên các trình duyệt.

Có ai có bất kỳ ý tưởng nào về cách tôi có thể nhận được các nhãn cơ sở của tôi và nhập văn bản để căn chỉnh không? Văn bản nhãn của tôi có thể trải rộng trên nhiều dòng và vì vậy tôi muốn có bất kỳ giải pháp nào để tính đến điều này.

Bạn có thể xem ví dụ trực tiếp về mã sau tại 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

Các cơ sở vấn đề liên kết có liên quan đến chiều cao dòng mặc định cho hộp văn bản và lĩnh vực đầu vào.

input trường có chiều cao mặc định lớn hơn để phù hợp với đệm, đường viền và văn bản.

tôi đã thử nghiệm với HTML/đoạn mã CSS của bạn và đăng tải phiên bản của tôi tại http://jsfiddle.net/audetwebdesign/EbuJH/

tôi đã thêm một số màu nền, một số padding và lề để phác thảo các khối.

Điều quan trọng là đặt thuộc tính line-height để các nhãn và trường nhập của bạn có cùng giá trị, 2.0 trong ví dụ của tôi.

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

Bạn có thể điều chỉnh chiều cao của dòng để hiểu cách hoạt động của nó.

Tôi đã thử nghiệm ví dụ trong Firefox và IE8 và kết quả phù hợp với loại tài liệu nghiêm ngặt.

Kết quả hoạt động tốt cho các nhãn một dòng. Một nhược điểm là các nhãn nhiều dòng có thể có nhiều khoảng cách hơn bạn muốn. Bạn có thể làm việc xung quanh điều này bằng cách đặt dòng đầu tiên của nhãn nhiều dòng trong một khoảng và áp dụng chiều cao dòng chỉ cho nhịp, nhưng đó là công việc phụ.

Ít nhất chúng ta đều biết điều gì sẽ kiểm soát định vị đường cơ sở, vì vậy chúng tôi có thể tiến bộ.