इनपुट की समान चौड़ाई कैसे प्राप्त करें और फ़ील्ड्स का चयन करें

Question

फ़ॉर्म में, मेरे पास एक चयन और दो इनपुट फ़ील्ड हैं। इन तत्वों को लंबवत रूप से संरेखित किया गया है। दुर्भाग्य से, मैं इन तत्वों की समान चौड़ाई प्राप्त नहीं कर सकता।

यहाँ मेरा कोड है:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

उपरोक्त उदाहरण के लिए, चयनित तत्व के लिए सबसे अच्छी चौड़ाई 198 या 199 px है (बेशक मैंने 193px की कोशिश की थी, लेकिन अंतर प्रमुख है)। मुझे लगता है, यह विभिन्न कंप्यूटरों और ब्राउज़रों पर रिज़ॉल्यूशन पर निर्भर करता है क्योंकि इन तत्वों में समान चौड़ाई नहीं होती है (कभी-कभी मुझे लगता है कि अंतर लगभग 1 या 2 पीएक्स है)। मैंने इन तत्वों को div या टेबल रो में सेट करने की कोशिश की है, लेकिन यह मदद नहीं करता है।

प्रश्न: मैं इन तत्वों की ठीक बराबर चौड़ाई कैसे प्राप्त कर सकता हूं?

Comments

यहाँ एक ही सवाल पूछा गया: stackoverflow.com/questions/895904/…

— BlaM

Answer 1

अद्यतन उत्तर

यहां इनपुट / टेक्सटेरिया / चुनिंदा तत्वों द्वारा उपयोग किए जाने वाले बॉक्स मॉडल को कैसे बदलना है ताकि वे सभी एक ही तरह से व्यवहार करें। आपको उस box-sizingसंपत्ति का उपयोग करने की आवश्यकता है जिसे प्रत्येक ब्राउज़र के लिए एक उपसर्ग के साथ लागू किया गया है

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

इसका मतलब यह है कि 2px अंतर जिसका हमने पहले उल्लेख किया था, मौजूद नहीं है।

उदाहरण http://www.jsfiddle.net/gaby/WaxTS/5/ पर

नोट: IE पर यह संस्करण 8 और ऊपर से काम करता है ..

---

मूल

यदि आप उनकी सीमाओं को रीसेट करते हैं तो selectतत्व हमेशा inputतत्वों की तुलना में 2 पिक्सेल कम होगा ।

उदाहरण: http://www.jsfiddle.net/gaby/WaxTS/2/

Comments

जवाब के लिए धन्यवाद। और अगर मैं 2px के लिए बॉर्डर सेट करता हूँ, तो इनपुट और सेलेक्टेड फील्ड्स के बीच 4 पिक्सेल होगी, 3px बॉर्डर के लिए - 6 पीएक्स ...?

— luk4443

@ लुक, नहीं। अगर इनपुट और सिलेक्ट दोनों में एक ही बॉर्डर की चौड़ाई है तो अंतर 2 पिक्सल तक रहेगा।

— गैब्रियल पेट्रीओली

धन्यवाद। मैं विभिन्न ब्राउज़रों में और फ़ायरफ़ॉक्स में आपके कोड की कोशिश करता हूं, सब कुछ ठीक है, लेकिन यह IE 8 और ओपेरा में काम नहीं करता है (अंतर बीटवैन इनपुट और चुनिंदा चौड़ाई हैं) :(

— luk4443

शायद आप बॉक्स-साइज़िंग निर्दिष्ट करने के लिए थे: बॉर्डर-बॉक्स? मुझे लगता है कि आपका यही मतलब है। सामग्री-बॉक्स वह डिफ़ॉल्ट है जहां पैडिंग + मार्जिन चौड़ाई में जोड़ता है।

— ओ'रोनी

यह वास्तव में होना चाहिए: -ms-box-sizing: सामग्री-बॉक्स; -moz बॉक्स-आकार: सामग्री बॉक्स; -webkit-बॉक्स आकार: सामग्री बॉक्स; बॉक्स आकार: सामग्री बॉक्स; मानक सिंटैक्स को प्रगतिशील वृद्धि पद्धति का पालन करने के लिए अंतिम रूप से जाना चाहिए ताकि भविष्य में जब मानक व्यापक रूप से लागू हो, तो उपयोगकर्ता एजेंट मानक सिंटैक्स का उपयोग करने के लिए डिफ़ॉल्ट होंगे और आप उपसर्ग संस्करणों को निकाल सकते हैं।

— user1739635

Answer 2

मैंने ऊपर Gaby का उत्तर (+1) आज़माया लेकिन यह केवल आंशिक रूप से मेरी समस्या को हल करता है। इसके बजाय मैंने निम्नलिखित सीएसएस का उपयोग किया, जहां सामग्री-बॉक्स को बॉर्डर-बॉक्स में बदल दिया गया था:

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

Comments

हाँ, ऐसा लगता है कि प्रपत्र फ़ील्ड उदा: textarea, इनपुट फ़ील्ड हमेशा बॉर्डर-बॉक्स बॉक्स मॉडल के साथ अच्छा काम करते हैं। बटन, चेकबॉक्स, रेडियो, सबमिट, रीसेट, और खोज इनपुट डिफ़ॉल्ट रूप से बॉर्डर-बॉक्स हैं।

— वेनसो

यहाँ का एक अच्छा तर्क है कि आपको इसका उपयोग क्यों करना चाहिएbox-sizing: border-box । एक अच्छे सार्वभौमिक कार्यान्वयन के लिए, शीर्ष स्तर HTML तत्व पर सेटिंग पर विचार करें और फिर नीचे विरासत में प्राप्त करें ताकि इसे आसानी से ओवरराइड किया जा सके।

— काइलमिट

सामग्री-बॉक्स ने मेरे मामले में कुछ नहीं किया। मुझे उनके लिए बॉर्डर-बॉक्स की आवश्यकता थी, ताकि वे समान हों। बॉर्डर-बॉक्स निश्चित रूप से बेहतर समाधान है, धन्यवाद।

— मैनुअल हॉफमैन

Answer 3

इस कोड को css में जोड़ें:

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

Answer 4

एक और वर्ग बनाएँ और 2px उदाहरण के साथ आकार बढ़ाएँ

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }