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

153

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;। हालाँकि यह और भी प्रश्न उठाता है (जो मैं एक अलग प्रश्न में पूछूंगा), लेकिन ऐसा लगता है कि चौड़ाई सामान्य सीएसएस बॉक्स मॉडल का उपयोग करती है और अधिकतम चौड़ाई इंटरनेट एक्सप्लोरर बॉर्डर-बॉक्स मॉडल का उपयोग करती है। कितना अजीब है।

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

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

html  css 
— spliff
स्रोत
— Christophe Eblur
7
@SleepyCod एक सटीक डुप्लिकेट नहीं है। यह प्रश्न inputतत्वों की समस्या से संबंधित है जो स्पष्ट रूप से CSS 2.1 विनिर्देश का पालन नहीं करता है, जबकि आपके द्वारा जुड़ा हुआ प्रश्न यह बताता है कि अतिप्रवाह वाले बक्से को कैसे रोका जाए जो कि रास्ते में CSS 2.1 युक्ति की सीमा में पूरी तरह से होता है। दोनों प्रश्न और उनके समाधान ओवरलैप करते हैं लेकिन उन्हें सटीक डुप्लिकेट कहते हैं बस गलत है।
— amn

जवाबों:

130

देखें कि मैं क्या लेकर आया था, box-sizing:border-boxसीएसएस 3 से अपेक्षाकृत अज्ञात शैली का उपयोग कर एक समाधान । यह किसी भी तत्व पर 'सही' 100% चौड़ाई की अनुमति देता है, चाहे वह तत्वों की पैडिंग और / या सीमाओं के बिना हो।

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title>Cross-browser CSS box-sizing:border-box</title>

        <style type="text/css">
            form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
            div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

            /* The voodoo starts here */
            .bb {
                box-sizing: border-box; /* CSS 3 rec */
                -moz-box-sizing: border-box; /* Firefox 2 */
                -ms-box-sizing: border-box; /* Internet Explorer 8 */
                -webkit-box-sizing: border-box; /* Safari 3 */
                -khtml-box-sizing: border-box; /* Konqueror */
            }
        </style>

        <!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
        <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
    </head>

    <body>
        <form name="foo" action="#">
            <div class="bb">div</div>
            <input class="bb" size="20" name="bar" value="field">
        </form>
    </body>
</html>

यह समाधान प्रतिशत और अन्य गैर-पिक्सेल चौड़ाई का समर्थन करने के लिए डीन एडवर्ड्स के कुछ ट्वीक्स के साथ एरिक एर्विडसन द्वारा लिखित व्यवहार के माध्यम से इंटरनेट एक्सप्लोरर 6 और इंटरनेट एक्सप्लोरर 7 का समर्थन करता है।

काम करने का उदाहरण
व्यवहार (boxsizing.htc)

— spliff
स्रोत
यह एक अद्भुत समाधान की तरह दिखता है, लेकिन IE8 में काम नहीं करता है (डिव और फील्ड बॉक्स पर्याप्त विस्तृत नहीं हैं)। क्या आपको पता है कि इस पद्धति पर कोई अपडेट हुआ है? धन्यवाद!
— राकेटमोनकीज
2
Schepp द्वारा यह पॉलीफ़िल, IE6 / 7 पॉलीफ़िल को अधिक
— धारदार
धन्यवाद! जब मैं उन दोनों को 300px चौड़ा करने के लिए सेट करूंगा तो मैं बाहर काम नहीं कर सका <इनपुट प्रकार = पाठ> और <इनपुट प्रकार = सबमिट> अलग-अलग चौड़ाई के थे। इससे यह हल हो गया! ध्यान दें कि दो साल बाद भी आपको फ़ायरफ़ॉक्स के नवीनतम संस्करण के लिए -moz- उपसर्ग का उपयोग करने की आवश्यकता है। caniuse.com/#feat=css3-boxsizing
— डैरेन कुक
4
दुर्भाग्य से, इस दृष्टिकोण का उपयोग रैपर div को खत्म करने के लिए नहीं किया जा सकता है यदि आपको मार्जिन जोड़ने की आवश्यकता है (क्योंकि मार्जिन किसी भी तत्व पर सही काम नहीं करता है यदि आप चौड़ाई का उपयोग करते हैं: 100%)
— सिस्टमपारॉक्स
6
हालांकि यह समस्या ठीक नहीं है। हाँ यह काम करता है अगर आप उपयोग करते हैं width:100%लेकिन यह उपयोग नहीं करता है, तो width:autoयहाँ देखें: jsfiddle.net/hGuzE
— nimrod
8

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

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

HTML की छिपी विशेषताएं

— MatrixFrog
स्रोत
8
मुझे यह जानने की उत्सुकता है कि CSS लोग इसे कैसे सही ठहराते हैं। यदि चौड़ाई पिक्सेल / प्रतिशत के साथ आकार में अधिक ओवरराइड कर सकती है, तो मैं यह नहीं देखता कि तत्व के ब्लॉक होने पर इसका सम्मान क्यों करना चाहिए।
— स्प्लिफ़
1
हालाँकि ऐसा ही होता है buttonजो एक sizeविशेषता नहीं है ?
— ज़नोना
1
एक प्रश्न जो "इस तरह मानक क्यों है" इस उत्तर की तरह भाग पर अधिक ध्यान केंद्रित करता है: stackoverflow.com/questions/4567988/… शीर्ष दावा है कि ऐसा इसलिए inputहै क्योंकि यह एक प्रतिस्थापित तत्व है।
— सिरो सेंटिल्ली 郝海东 i iro i 法轮功 ''
7

आपकी सबसे अच्छी शर्त यह है कि इनपुट को अपनी सीमा, मार्जिन, आदि के साथ एक डिव में लपेटें और चौड़ाई 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>
— जोनाथन फिंगलैंड
स्रोत
1
हाँ, यह काम करेगा लेकिन यह एक जवाब की तुलना में अधिक हल है। मैं यह स्थापित करने की कोशिश कर रहा हूं कि क्यों इनपुट ब्लॉक व्यवहार की उपेक्षा करता है।
— SpliFF
2
जोनाथन, कृपया यहाँ मेरी स्पष्ट अशिष्टता को क्षमा करें, लेकिन मैं यहाँ सही (tm) उत्तर की तलाश में आया था, और ख़ुशी से उस हिस्से को भी पढ़ा जहाँ @SpliFF विशेष रूप से उल्लेख करता है कि वह "वर्कअराउंड के सीधे उत्तर" को पसंद करेगा, फिर भी आप एक और निरर्थक जोड़ देंगे। (जैसा कि, इंटरनेट पर SO और अन्य जगहों पर दोनों में कई बार दोहराया गया) उत्तर, प्रतीत होता है कि प्रश्न के अनुबंध को अनदेखा किया जा सकता है। क्या मैं आपसे पूछ सकता हूं - क्यों? अग्रिम धन्यवाद। -आपका सादर।
— amn
1

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

<!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>
— याकूब
स्रोत
1
मैंने अतीत में नकली दृष्टिकोण किया है लेकिन ईमानदार होने के लिए मैं इससे बीमार हो रहा हूं। मैं इनपुट प्राप्त करने और मिलान करने के लिए चयन करने के लिए 99% चौड़ाई का उपयोग करके सभी प्रकार के मंद हैक को समाप्त करता हूं। मैं वास्तव में एक डिव की तरह एक इनपुट का इलाज करना चाहता हूं और मुझे उम्मीद थी कि मैं कुछ अनदेखी करूंगा।
— स्प्लिफ़
2
यह भी कि आपका इनपुट इनपुटवॉपर को ओवरफ्लो करेगा क्योंकि इसमें अभी भी चौड़ाई है: एक आंतरिक पैडिंग के साथ 100%।
— SpliFF
1

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

form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }
— माइक
स्रोत
1
आपने इनपुट पैडिंग और बॉर्डर को छोड़ दिया। मैं कहने वाला था कि आप गलत हैं जब तक मुझे एहसास हुआ कि आप क्या कर रहे हैं। अब मुझे लगता है कि मर्कुरो क्या करने की कोशिश कर रहा था (उसका कोड अभी भी गलत है, लेकिन अवधारणा लगभग वहां थी)। पैडिंग-राइट १२ पीएक्स (इनपुट के बॉर्डर प्लस पैडिंग) द्वारा १००% का अर्थ बदल देता है। इस दृष्टिकोण का दोष यह है कि फॉर्म के अन्य सभी बच्चे पैडिंग से भी प्रभावित होते हैं और उन्हें भी क्षतिपूर्ति करने की आवश्यकता होती है।
— स्प्लिफ़
1

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

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

        <style>

            .container {
                width:90%;
            }

            .container div{
                border: 1px solid red;
                padding: 5px;
                font-size:12px;
                width:100%;
            }

            input{
                  width:100%;
                border: 1px solid red;
                font-size:12px;
                padding: 5px;
            }

            form {

                margin:0px;
                padding:0px;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <div>
                asdasd
            </div>
            <form action="">
                <input type="text" name="foo" />
            </form>
        </div>
    </body>
</html>
— AlexC
स्रोत
1
ऊपर जैसा ही संभावित है, आपके पास 100% चौड़ाई पर एक आंतरिक गद्दी है। वह ओवरफ्लो हो जाएगा।
— स्प्लिफ़
आप जावास्क्रिप्ट
— एलेक्स
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.