एक ही लाइन पर फॉर्म लेबल और इनपुट का क्षैतिज प्लेसमेंट प्राप्त करना

वेब विकास में, फॉर्म का सौंदर्यशास्त्र उपयोगकर्ता अनुभव के लिए महत्वपूर्ण है। लेबल और इनपुट फ़ील्ड को एक ही पंक्ति में व्यवस्थित करने से फ़ॉर्म की पठनीयता और उपयोगिता बढ़ सकती है। यह आलेख बताता है कि किसी इनपुट तत्व को उसकी लंबाई की परवाह किए बिना, उसके लेबल के साथ सहजता से कैसे संरेखित किया जाए। लाइन में इनपुट की चौड़ाई को ऑटो पर सेट करना शामिल है। हालाँकि, इसका परिणाम अक्सर एक निश्चित इनपुट चौड़ाई होता है। वैकल्पिक रूप से, width: 100% का उपयोग करना; एक अवांछित लेआउट बनाते हुए, इनपुट को एक नई लाइन में ले जाता है। यह लेबल के नीचे अपनी स्थिति बनाए रखने के लिए पर्याप्त पैडिंग है। इसके बाद, लेबल को बाईं ओर फ़्लोट करने के लिए समायोजित करने से यह स्पैन के बाईं ओर स्थानांतरित हो जाता है। स्पैन के ओवरफ्लो को हिडन पर सेट करने से यह सुनिश्चित होता है कि इसकी सामग्री इसकी लंबाई की परवाह किए बिना फिट होती है, इस प्रकार वांछित संरेखण बनता है।

डिस्प्ले का उपयोग करके इष्टतम प्लेसमेंट: टेबल-सेल

अन्य दृष्टिकोण लेबल और इनपुट को तालिका कोशिकाओं के रूप में स्थित करने के लिए डिस्प्ले: टेबल-सेल का उपयोग करता है। इसके लिए आवश्यक है कि कंटेनर को एक तालिका के रूप में प्रदर्शित किया जाए और रिक्ति को अनुकूलित करने के लिए इनपुट पैडिंग को समायोजित करते समय अपनी स्थिति बनाए रखने के लिए लेबल की चौड़ाई स्थापित की जाए।

कार्यान्वयन मार्गदर्शन

पहले के लिए समाधान, HTML कोड का उपयोग इस प्रकार करें:

Label और CSS:

लेबल { नाव छोड़ी } अवधि { प्रदर्शन: ब्लॉक; ओवर फलो हिडेन; पैडिंग: 0 4px 0 6px } इनपुट { चौड़ाई: 100% }

दूसरे समाधान के लिए:

Label

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

.container { प्रदर्शन: तालिका; चौड़ाई: 100% } लेबल { प्रदर्शन: टेबल-सेल; चौड़ाई: 1px; व्हाइट-स्पेस: अब्रैप } अवधि { प्रदर्शन: टेबल-सेल; पैडिंग: 0 0 0 5px } इनपुट { चौड़ाई: 100% }

इन समाधानों का पालन करके, डेवलपर्स लेबल और इनपुट तत्वों के वांछित क्षैतिज संरेखण को प्राप्त कर सकते हैं, फॉर्म डिजाइन और उपयोगकर्ता अनुभव को बढ़ा सकते हैं।