html - प्रदर्शन के साथ इनपुट: ब्लॉक एक ब्लॉक नहीं है, क्यों नहीं?




css (4)

आप इसे नकली बना सकते हैं, इस तरह:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
        div, #inputWrapper {
            border: 1px solid red;
        }
        #topDiv {
            padding: 5px;
            height: 5px;
        }
        form {
            display: block;
        }
        #inputWrapper {
            overflow: hidden;
            height: 15px;
        }
        input {
            display: block;
            width: 100%;
            border-style: none;
            padding-left: 5px;
            padding-right: 5px;
            height: 15px;
        }
        </style>
    </head>

    <body>
        <div id="topDiv"></div>
        <form>
          <div id="inputWrapper">
            <input type="text" name="foo" />
          </div>
        </form>
    </body>
</html>

display:block;width:auto; क्यों करता display:block;width:auto; मेरे पाठ इनपुट पर एक div की तरह व्यवहार नहीं करते हैं और कंटेनर चौड़ाई भरें?

मैं इस धारणा के तहत था कि एक div ऑटो चौड़ाई के साथ बस एक ब्लॉक तत्व है। निम्नलिखित कोड में div और इनपुट में समान आयाम नहीं होना चाहिए?

मैं चौड़ाई भरने के लिए इनपुट कैसे प्राप्त करूं? 100% चौड़ाई काम नहीं करेगी, क्योंकि इनपुट में पैडिंग और सीमा है (1 पिक्सेल + 5 पिक्सल + 100% + 5 पिक्सल + 1 पिक्सेल की अंतिम चौड़ाई)। निश्चित चौड़ाई एक विकल्प नहीं है, और मैं कुछ अधिक लचीला खोज रहा हूं।

मैं एक कामकाज के लिए एक सीधा जवाब पसंद करेंगे। यह एक सीएसएस quirk की तरह लगता है और समझ में यह बाद में उपयोगी हो सकता है।

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
        div, input {
            border: 1px solid red;
            height: 5px;
            padding: 5px;
        }
        input, form {
            display: block;
            width: auto;
        }
        </style>
    </head>

    <body>
        <div></div>
        <form>
            <input type="text" name="foo" />
        </form>
    </body>
</html>

मुझे इंगित करना चाहिए कि मैं इसे रैपर वर्कअराउंड के साथ पहले ही कर सकता हूं। पेज सेमेन्टिक्स और सीएसएस चयनकर्ता संबंधों के साथ इस खराब होने के अलावा मैं समस्या की प्रकृति को समझने की कोशिश कर रहा हूं और क्या इसे INPUT की प्रकृति को बदलकर दूर किया जा सकता है।

ठीक है, यह वास्तव में अजीब है! मैंने पाया है कि समाधान केवल max-width:100% जोड़ने के लिए है width:100%;padding:5px; साथ इनपुट में width:100%;padding:5px; । हालांकि यह और भी सवाल उठाता है (जो मैं एक अलग प्रश्न में पूछूंगा), लेकिन ऐसा लगता है कि चौड़ाई सामान्य सीएसएस बॉक्स मॉडल का उपयोग करती है और अधिकतम चौड़ाई इंटरनेट एक्सप्लोरर सीमा-बॉक्स मॉडल का उपयोग करती है। कितना अजीब है।

ठीक है, वह अंतिम फ़ायरफ़ॉक्स 3 में एक बग प्रतीत होता है। इंटरनेट एक्सप्लोरर 8 और सफारी 4 अधिकतम चौड़ाई को 100% + पैडिंग + सीमा तक सीमित करता है जो कि स्पेक कहता है। अंत में, इंटरनेट एक्सप्लोरर कुछ सही मिला।

हे भगवान, यह कमाल है! इसके साथ खेलने की प्रक्रिया में, और आदरणीय गुरु डीन एडवर्ड्स और एरिक अरविड्सन से बहुत मदद के साथ, मैंने मनमाने ढंग से पैडिंग और सीमाओं वाले तत्वों पर एक वास्तविक क्रॉस-ब्राउज़र 100% चौड़ाई बनाने के लिए तीन अलग-अलग समाधानों को एक साथ टुकड़ा करने में कामयाब रहे। नीचे जवाब देखें। इस समाधान के लिए किसी भी अतिरिक्त HTML मार्कअप, केवल एक वर्ग (या चयनकर्ता) और विरासत इंटरनेट एक्सप्लोरर के लिए वैकल्पिक व्यवहार की आवश्यकता नहीं है।


आपकी सबसे अच्छी शर्त है कि इनपुट को अपनी सीमा, मार्जिन इत्यादि के साथ एक div में लपेटें, और अंदर चौड़ाई 100% के साथ इनपुट करें और कोई सीमा नहीं, कोई मार्जिन इत्यादि नहीं।

उदाहरण के लिए,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
            div {
                border: 1px solid red;
                padding: 5px;
            }
            input, form {
                display: block;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <form>
            <div><input type="text" name="foo" /></div>
        </form>
    </body>
</html>

इसे इस्तेमाल करे:

form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }

ऐसा होने का कारण यह है कि एक टेक्स्ट इनपुट का आकार इसकी आकार विशेषता द्वारा निर्धारित किया जाता है। <इनपुट> टैग के अंदर आकार = "50" जोड़ें। फिर इसे आकार = "100" में बदलें - देखें मेरा क्या मतलब है?

मुझे संदेह है कि एक बेहतर समाधान है, लेकिन मन में आने वाला एकमात्र ऐसा कुछ है जो मुझे "एचटीएमएल की छिपी हुई विशेषताओं" प्रश्न पर पाया गया है: इनपुट के बजाय सामग्री-संपादन योग्य div का उपयोग करें। उपयोगकर्ता इनपुट को संलग्न फॉर्म में पास करना (यदि आपको यही चाहिए तो) थोड़ा मुश्किल हो सकता है।

एचटीएमएल की छिपी हुई विशेषताएं





css