एक तत्व चौड़ाई बनाने के लिए कैसे: 100% माइनस पैडिंग?

Question

मेरे पास एक html इनपुट है।

padding: 5px 10px;मेरे पास इनपुट है कि मैं इसे माता-पिता की चौड़ाई का 100% होना चाहिए (जो द्रव है)।

हालांकि width: 100%;इनपुट का उपयोग करने के कारण 100% + 20pxमैं इसके आसपास कैसे पहुंच सकता हूं?

उदाहरण

Comments

यह जवाब देखें मैंने 15 मिनट पहले पोस्ट नहीं किया: stackoverflow.com/questions/5219030/… यह आपके लिए पूरी तरह से काम करना चाहिए, जब तक कि आपको IE7 में काम करने की आवश्यकता न हो।

— Mar११ को

यदि आपने मेरी विधि का उपयोग किया है, तो मेरे उत्तर पर बना मामूली संपादन देखें। यह कुछ ब्राउज़रों में "यहां तक ​​कि पैडिंग" सुनिश्चित करता है।

— १२:०२

@ हेलवुड के पास समाधान है जो inputIE7 के लिए पैडिंग रखता है और समर्थन करता है

— व्लादिमीर स्टार्कोव

कृपया कैल्क फ़ंक्शन का उपयोग करने के लिए नीचे का उत्तर भी देखें

— Daan

Answer 1

box-sizing: border-box इसे ठीक करने का एक त्वरित, आसान तरीका है:

यह सभी आधुनिक ब्राउज़रों और IE8 + में काम करेगा ।

यहाँ एक डेमो है: http://jsfiddle.net/thirtydot/QkmSk/301/

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

-webkit-box-sizingआधुनिक ब्राउज़र में ब्राउज़र उपसर्ग संस्करण ( , आदि) की आवश्यकता नहीं है।

Comments

मुझे नहीं लगता कि यह समाधान का बुरा है। सामान्य तौर पर, एक अतिरिक्त div में तत्वों को लपेटना तत्व तत्वों की कुल चौड़ाई को परे धकेलने के बिना तत्वों को पैड करने का एक अच्छा तरीका है।

— जेक विल्सन

रैपिंग डिव की पैडिंग भी सीधे इनपुट में पैडिंग को जोड़ने के लिए गैर-समान परिणाम उत्पन्न करती है।

— फेलिक्स फंग

@thirtydot मेरे पास कुछ और लचीले और सुरुचिपूर्ण समाधान हैं जो इनपुट की चौड़ाई को बनाए रखते हैं

— व्लादिमीर स्टार्कोव

@thirtydot हाँ, बस इसे IE7 के लिए टूटा छोड़ दें और M $ को ठीक कर दें :)

— पेट्र पेलर

यह भी आप में से किसी के लिए jQuery लोगों बनाम बॉक्स आकार नौकरशाही का आकार घटाने के लिए ऑटो आकार textareas को बरकरार रखता है जब तक कि आप छिपे हुए div पर लागू नहीं होते हैं।

— माइकल जे। कल्किंस

Answer 2

यही कारण है कि हमारे पास box-sizingसीएसएस में है।

मैंने आपका उदाहरण संपादित किया है, और अब यह सफारी, क्रोम, फ़ायरफ़ॉक्स और ओपेरा में काम करता है। इसे देखें: http://jsfiddle.net/mathias/Bupr3/ मैंने जो कुछ भी जोड़ा वह यह था:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

दुर्भाग्य से पुराने ब्राउज़र जैसे IE7 इसका समर्थन नहीं करते हैं। यदि आप एक समाधान ढूंढ रहे हैं जो पुराने IE में काम करता है, तो अन्य उत्तरों को देखें।

Comments

+1, लेकिन caniuse.com/#search=box-sizing IE 8? इसके अलावा, github.com/Schepp/box-sizing-polyfill IE 6-7 के लिए एक समाधान प्रदान करता है।

— एलिक्स एक्सल

+1, यह बहुत अच्छा है यदि आप IE के बारे में परवाह नहीं करते हैं (उदाहरण के लिए PhoneGap का उपयोग करते समय)

— ल्यूक बी।

यह किस तरह की जादूगरनी है? उत्तर के लिए +1 और मेरे ऊपर की टिप्पणी के लिए +1 (यह वास्तव में मुझे इसकी आवश्यकता है)।

— एडुआर्ड लुका

यह चौड़ाई के लिए +20 के बजाय डिफ़ॉल्ट व्यवहार होना चाहिए। कभी-कभी सीएसएस गंभीरता से गड़बड़ लगता है।

— Soth

IE पर बॉक्स-आकार का समर्थन स्पष्ट करने के लिए, IE बॉक्स-आकार की संपत्ति IE दस्तावेज़ मोड पर निर्भर करती है, यह "IE8 मानक मोड" और उच्चतर पर काम करती है। तो यह IE8 ब्राउज़र संस्करण में भी काम करेगा यदि दस्तावेज़ मोड "IE8 मानक मोड" है। उम्मीद है की यह मदद करेगा।

— संजीव

Answer 3

प्रतिशत में पैडिंग का भी उपयोग करें और चौड़ाई से हटा दें:

गद्दी: 5%;
चौड़ाई: 90%;

Comments

फी, यह समाधान गैर-लचीली लेआउट के लिए केवल आदर्श है।

— muffs

+1, इस समस्या से मुझे लगता है कि सीमाएँ होंगी। आम तौर पर, वे केवल 1 से 3 पिक्सेल अधिकतम के साथ "सही" दिखते हैं। उप-पिक्सेल गोलाई के संबंध में ब्राउज़र की विसंगतियों को देखते हुए परिणाम बहुत अप्रत्याशित हैं।

— एलिक्स एक्सल

Answer 4

आप इसका उपयोग किए बिना कर सकते हैं box-sizingऔर जैसे स्पष्ट समाधान नहींwidth~=99% ।

JsFiddle पर डेमो :

• इनपुट paddingऔरborder
• नकारात्मक ऋणात्मक margin= border-width+ इनपुट में जोड़ेंhorizontal padding
• पिछले चरण से इनपुट के रैपर क्षैतिज के paddingबराबर जोड़ेंmargin

HTML मार्कअप:

<div class="input_wrap">
    <input type="text" />
</div>

सीएसएस:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Comments

इनपुट पेडिंग की भरपाई के लिए रैपर के लिए इनपुट और पैडिंग के लिए मार्जिन का उपयोग करना एक अच्छी चाल है।

— मौलिक

पूरी तरह सहमत हूँ !!! मैंने इस समाधान का उपयोग किया है और यह बिना किसी गंदे चाल के साथ व्यापक रूप से काम करता है! यह हर तरह के जवाबों का हल होना था ..

— आंद्रे फिग्यूएरेडो

मुझे यह समझ में नहीं आया कि नकारात्मक मार्जिन की क्या भूमिका है - मुझे पता है कि यदि मूल्य गलत है, तो बॉक्स एक तरफ समाप्त हो जाता है, लेकिन किसी तरह एक सममित मार्जिन इसे ठीक करता है

— केसबश

Answer 5

सीएसएस कैल्क () का प्रयोग करें

सुपर सिंपल और कमाल।

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

जैसा कि यहां देखा गया है: वेबविताली ( https://stackoverflow.com/users/713523/webvitaly ) द्वारा दिव्य चौड़ाई 100% माइनस पिक्सेल की निश्चित मात्रा मूल स्रोत: http://web-profile.com.ua/css/dev/ -width-100prc-ऋण-100px /

बस इसे यहाँ पर कॉपी किया है, क्योंकि मैं लगभग इसे दूसरे धागे में याद किया।

Comments

हालांकि, आपको मैन्युअल रूप से प्रोग्राम करना होगा। आदर्श रूप से यह स्वचालित रूप से निर्धारित किया जाएगा।

— जैकहसकेबोर्ड

Answer 6

मैं एक कंटेनर में 15px पैडिंग के साथ मानता हूं, यह वही है जो मैं हमेशा आंतरिक भाग के लिए उपयोग करता हूं:

width:auto;
right:15px;
left:15px;

जो भीतरी हिस्से को खींचेगा, उसकी चौड़ाई 15 गुणा कम होनी चाहिए।

Comments

क्या आप width:autoकिसी inputक्षेत्र पर लागू होने का पूरा उदाहरण पोस्ट कर सकते हैं ?

— जकुबिस्ज़ोन

केवल एक आधा जवाब। तत्वों की डिफ़ॉल्ट स्थिति स्थिर है, इसलिए बाएँ और दाएँ यहाँ कुछ भी नहीं करेंगे। और चौड़ाई ऑटो भी प्रारंभिक मूल्य है, इसलिए .. यह सब जवाब कुछ भी नहीं है :)

— honk31

Answer 7

आप कुछ पोजिशनिंग ट्रिक्स आजमा सकते हैं। आप इनपुट को एक div position: relativeऔर एक निश्चित ऊंचाई के साथ लगा सकते हैं , फिर इनपुट पर position: absolute; left: 0; right: 0;, और किसी भी तरह का पैडिंग कर सकते हैं।

जीवंत उदाहरण

Comments

आपने इसमें किन ब्राउज़रों का परीक्षण किया? :(

— १२:३०

हम्म, केवल क्रोम में काम करता है। लेकिन मुझे पता है कि मुझे एफएफ और आईई में भी काम करने के लिए कुछ समान मिला है।

— फेलिक्स

ऐसा लगता है कि यह <input>फ़ायरफ़ॉक्स में तत्वों के साथ काम नहीं कर रहा है (IE के बारे में आईडी)। यह <div>एस के साथ काम करता है , हालांकि। और नहीं, display: blockपर <input>या तो काम नहीं करता है: - /

— फेलिक्स

Answer 8

यहाँ codeontrack.com से सिफारिश की गई है , जिसके अच्छे समाधान उदाहरण हैं:

Div की चौड़ाई को 100% पर सेट करने के बजाय, इसे ऑटो पर सेट करें, और सुनिश्चित करें, कि यह <div>प्रदर्शित करने के लिए सेट है: ब्लॉक (डिफ़ॉल्ट <div>)।

Comments

आपको सीधे लिंक पोस्ट नहीं करना चाहिए आप उस लिंक से जानकारी शामिल कर सकते हैं। कारण है, कल हो सकता है कि लिंक उपलब्ध नहीं होगा और आपका जवाब तब मान्य नहीं होगा ..

— अमनेश गोयल

Answer 9

इनपुट बॉक्स की गद्दी को एक आवरण तत्व में ले जाएं।

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

यहां देखें उदाहरण: http://jsfiddle.net/L7wYD/1/

Answer 10

बस चौड़ाई के बीच अंतर को समझें: ऑटो; और चौड़ाई: 100%; चौड़ाई: ऑटो; (AUTO) MATICALLY पेडिंग सहित रैपिंग डिव के साथ दिए गए सटीक फिट करने के लिए चौड़ाई की गणना करता है। चौड़ाई 100% चौड़ाई का विस्तार करती है और पैडिंग को जोड़ती है।

Comments

क्या आप एक उदाहरण शामिल कर सकते हैं जहां यह <इनपुट> के साथ काम करता है? अन्यथा आप सिर्फ लोगों को एक जंगली हंस पीछा पर भेज रहे हैं।

— श्री लिस्टर

Answer 11

एक कंटेनर में इसे लपेटने के बारे में क्या। कंटेनर की तरह शैली है:

{
    width:100%;
    border: 10px solid transparent;
}

Answer 12

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

width: 100%;
box-sizing: border-box;

Answer 13

मेरे लिए, उपयोग करना margin:15px;padding:10px 0 15px 23px;width:100%, परिणाम यह था:

मेरे लिए समाधान के width:autoबजाय उपयोग करना था width:100%। मेरा नया कोड था:

margin:15px;padding:10px 0 15px 23px;width:auto। तब तत्व ठीक से संरेखित:

Answer 14

मेरी भी यही समस्या थी। इसे ठीक करें:

width: 100%;
box-sizing: border-box;

Answer 15

तुम यह केर सकते हो:

width: auto;
padding: 20px;

Comments

यह समान 100% - मार्जिन नहीं है।

— जेम्स