<input> तत्व सम्मान न्यूनतम चौड़ाई क्यों नहीं है?

Question

http://jsbin.com/nuzazefuwi/1/edit?html,css,output

पाठ बॉक्स ऊपर के लिंक में यह 152px की चौड़ाई है केवल 10px बजाय होना चाहिए।

इस कोड है:

.input { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.cont { 
 
    padding: 2px; 
 
} 
 

 
.main { 
 
    position: absolute; 
 
    border: 1px solid black; 
 
    min-width: 15px; 
 
}

<div class='main'> 
 
    <div class='cont'> 
 
    <input type="text" class='input' /> 
 
    </div> 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> the textbox should have 10px

ऐसा लगता है कि इनपुट के बाद ही .mainmin-width 156px से अधिक है सही चौड़ाई प्राप्त करने के लिए शुरू होता है।

Answer 1

वहाँ <input> प्रकार के पाठ, खोज, टेलीफोन, यूआरएल, ईमेल, या पासवर्ड है, जो लगभग पर size="20" का डिफ़ॉल्ट मान है। 100px चौड़ाई (विभिन्न ब्राउज़र और ओएस के लिए भिन्न हो सकता है)।

माता-पिता पर, आप min-width:15px सेट करते हैं, जो कोई प्रभाव नहीं लेता है, क्योंकि यह मान 100px से बहुत छोटा है। यदि आप इसे width:15px या max-width:15px (या इसे अतिरिक्त नियम के रूप में जोड़ें) में बदलते हैं जो सही तरीके से काम करेगा।

टिप्पणी के रूप में, वैकल्पिक रूप से आप size को size="1" जैसे छोटे मान दे सकते हैं।

Answer 2

परिवर्तन आपके सीएसएस चौड़ाई 155px

.input{ 
    width:155px; //Replace 100% to 155px 
box-sizing:border-box; 
} 

Answer 3

रूप .main कंटेनर के अंदर और केवल यदि आप छोटे आकार की स्क्रीन का आकार बदलने आपको लगता है कि वास्तव में input की तुलना में छोटे के साथ अंदर फिट बैठता है देखेंगे सामग्री की चौड़ाई तक फैली डिफ़ॉल्ट इनपुट चौड़ाई। यदि आप .main सामग्री के width को बदलते हैं तो आप देखेंगे कि input बड़ी स्क्रीन पर यह डिफ़ॉल्ट width बदलता है और min-width मान से कम नहीं होता है।

.main{ 
    position:absolute; 
    border:1px solid black; 
    width: 75px; 
    min-width:15px; 
} 

http://jsbin.com/xeyupinaja/3/edit

Answer 4

आपके पास min-width सेट है, लेकिन max-width नहीं है।

टेक्स्टबुक में ब्राउज़र द्वारा डिफ़ॉल्ट आकार सेट किया गया है। यह डिफ़ॉल्ट आकार min-height से अधिक में है, इसलिए ब्राउज़र और सीएसएस दोनों डिफ़ॉल्ट चौड़ाई होने और कंटेनर की चौड़ाई बढ़ाने के लिए खुश हैं।

कंटेनर के लिए max-width या width सेट करके, कंटेनर और इनपुट का आकार प्रतिबंधित होगा और उनके आकारों की गणना उसी प्रकार की जाएगी।

.main{ 
    position:absolute; 
    border:1px solid black; 
    min-width:14px; 
    max-width:140px; // What do you want here? 
} 

मुझे लगता है कि यह भी @ एसडीसीआर ने उत्तर दिया और उसने आपको डिफ़ॉल्ट आकार और गणना के बारे में विवरण भी दिया।