सीएसएस

Question

मैं इस सीएसएस का उपयोग करने के लिए अपने प्रपत्र तत्वों की चौड़ाई सेट करने का प्रयास किया साथ पाठ क्षेत्र चौड़ाई सेट करने में असमर्थ: यदि आप इस फ़ायरफ़ॉक्स स्क्रीनशॉट आप देखेंगे को देखें, तो

input[type="text"], textarea { width:250px; } 

कि खेतों नहीं हैं एक ही चौड़ाई। मुझे सफारी में भी इसी तरह का प्रभाव मिलता है।

alt text http://screamingv.com/ss.png

वहाँ किसी भी समाधान कर रहे हैं?

अपडेट: अभी तक जानकारी के लिए धन्यवाद। अब मैंने सुनिश्चित किया है कि दोनों तत्वों पर पैडिंग/मार्जिन/सीमा एक ही सेट है। मुझे अभी भी समस्या हो रही थी। मेरे द्वारा पोस्ट किया गया मूल सीएसएस सरलीकृत था ... मैं textarea की ऊंचाई को 200px पर भी सेट कर रहा था। जब मैं ऊंचाई स्टाइल हटा देता हूं, तो चौड़ाई मिलती है। अजीब। इसका कोई अर्थ नही बन रहा है।

ब्राउज़र बग?

Answer 1

पैडिंग और सीमाओं को हटाने का प्रयास करें। या फिर उन दोनों तत्वों

input[type="text"], 
textarea { 
    width:250px; 
    padding: 3px; 
    border: none; 
    } 

या के लिए एक ही बनाने का प्रयास करें:

input[type="text"], 
textarea { 
    width:250px; 
    padding: 0; 
    border: 1px solid #ccc; 
    } 

इनपुट और पाठ क्षेत्र तत्वों अक्सर कुछ गद्दी ब्राउज़र (ब्राउज़र से भिन्न होता है) द्वारा आवेदन किया है और यह चीजों को प्रभावी ढंग से व्यापक प्रकट कर सकते हैं निर्दिष्ट चौड़ाई से।

अद्यतन: box-sizing: border-box; चौड़ाई निर्धारित करने का एक आसान तरीका है कि उस पैडिंग और सीमा को जोड़ने के बजाय खाया जाएगा। देखें: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

शायद तुम, एक उपयोगकर्ता विशिष्ट सीएसएस ओवरले आपके ब्राउज़र में कहीं परिभाषित किया गया है क्योंकि मैं सिर्फ यह परीक्षण किया है और यह उम्मीद के रूप में काम करता है: (।? खिड़कियों पर परीक्षण किया गया हो सकता है कि एप्पल देशी विगेट्स कुछ मोड़ है) http://jsbin.com/exase/edit

Answer 3

कोशिश सीमा: 0; या सीमा: 1 पीएक्स ठोस # 000;

Answer 4

यह शायद <input> और <textarea> तत्वों पर विभिन्न डिफ़ॉल्ट मार्जिन के कारण होता है। इस तरह कुछ उपयोग करने का प्रयास करें।

input[type="text"], textarea { 
    padding: 0; 
    margin: 0; 
    width:250px; 
} 

Answer 5

इस उत्तर तीन साल देर हो चुकी है, लेकिन मैं इसे यहाँ पोस्ट कर रहा हूँ बस मामले में किसी और (के रूप में मैं अभी किया) em's में चौड़ाई सेट करने की कोशिश कर रहा है और नहीं pixels और इस पोस्ट भर आता है। सुनिश्चित करें कि फ़ॉन्ट आकार समान है,

उदा।

input, textarea { 
    font-size:12px; 
    width:20em; 
    padding:0; 
    margin:0 
} 

अन्यथा टेक्स्टरेरा एक अलग आकार (एफएफ 12 पर सच) हो सकता है।

Answer 6

मैं भी इस तरह की समस्या से जूझ रहा था, और यह सवाल मेरे गुगलिंग का पहला परिणाम था। अंत में मेरे लिए क्या काम किया गया था box-sizing: content-box टेक्स्टरेरा के लिए - ड्रूपल 7 इसे border-box पर डिफ़ॉल्ट करता है जो पैडरेरिया के आकार से पैडिंग और सीमा चौड़ाई घटाया जाता है।

Answer 7

सेट चौड़ाई 100% और उसके बाद अधिकतम-चौड़ाई का उपयोग करें:

 textarea { 
      width:100%; 
      max-width:250px; 
    } 

// हटा मार्जिन और गद्दी, आप इसे जोड़ सकते हैं अगर आप चाहते हैं।