पाठ इनपुट में पाठ की आधार रेखा के साथ फ़ील्ड लेबल की आधार रेखा को संरेखित करना

Question

मैं किसी फ़ील्ड में कुछ लेबल टेक्स्ट के बगल में टेक्स्ट इनपुट प्रदर्शित कर रहा हूं। मुझे लेबल टेक्स्ट की आधार रेखा के साथ लाइन इनपुट में पाठ की आधार रेखा चाहिए। मैं अपने .label तत्वों के लिए एक धुंध कारक padding-top सेट कर सकता हूं लेकिन मेरे .value तत्वों की सामग्री में केवल-पढ़ने वाले पाठ हो सकते हैं और इससे उन फ़ील्ड के लिए लेबल/मान बेसलाइन संरेखण खराब हो जाएगा। मुझे यह भी संदेह है कि ब्राउज़रों में इनपुट फ़ील्ड के बीच ऊंचाई अंतर के कारण अलग-अलग ब्राउज़रों के लिए अलग-अलग धुंध कारकों की आवश्यकता होगी।

क्या किसी के पास कोई विचार है कि मैं अपना लेबल और इनपुट टेक्स्ट बेसलाइन को संरेखित करने के लिए कैसे प्राप्त कर सकता हूं? मेरा लेबल टेक्स्ट कई लाइनों का विस्तार कर सकता है और इस तरह मैं इसे किसी भी समाधान में लेना चाहता हूं।

आप http://jsbin.com/enobe3 पर निम्न कोड का एक लाइव उदाहरण देख सकते हैं।

सीएसएस

* { 
    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; 
} 

एचटीएमएल

<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/सीएसएस कोड के टुकड़े के साथ प्रयोग किया और 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 */ 
} 

आप यह कैसे काम करता की भावना पाने के लिए लाइन ऊंचाई को समायोजित कर सकते हैं।

मैंने फ़ायरफ़ॉक्स और आईई 8 में उदाहरण का परीक्षण किया और परिणाम सख्त सिद्धांत के अनुरूप हैं।

परिणाम एकल लाइन लेबल के लिए अच्छी तरह से काम करता है। एक दोष यह है कि बहु-रेखा लेबलों की तुलना में अधिक दूरी हो सकती है। आप एक अवधि में मल्टी-लाइन लेबल की पहली पंक्ति डालकर और लाइन की ऊंचाई को केवल अवधि में लागू करके इस पर काम कर सकते हैं, लेकिन यह अतिरिक्त काम है।

कम से कम हम जानते हैं कि आधारभूत स्थिति को नियंत्रित करने के लिए क्या हम समझते हैं, इसलिए हम प्रगति कर सकते हैं।