एचटीएमएल में इनपुट और टेक्स्ट इनपुट का चयन करें - बराबर चौड़ाई बनाने का सबसे अच्छा तरीका?

Question

मैं बहुत (केवल उदाहरण के उद्देश्यों) की तरह एक साधारण से फ़ॉर्म मिल गया है ...

<form> 

    <div class="input-row"> 
     <label>Name</label> 
     <input type="text" name="name" /> 
    </div> 

    <div class="input-row"> 
     <label>Country</label> 
     <select name="country"> 
     <option>Australia</option> 
     <option>USA</option> 
     </select> 
    </div> 

</form> 

मेरे लेआउट विधि का उपयोग कर सीएसएस इस प्रकार है ...

form { 
    width: 500px; 
} 

form .input-row { 
    display: block; 
    width: 100%; 
    height: auto; 
    clear: both; 
    overflow: hidden; /* stretch to contain floated children */ 
    margin-bottom: 10px; 
} 

form .input-row label { 
    display: block; 
    float: left; 
} 

form .input-row input, 
form .input-row select { 
    display: block; 
    width: 50%; 
    float: right; 
    padding: 2px; 
} 

सभी संरेखित करता है यह काफी अच्छी तरह से, मेरे select तत्व को छोड़कर (फ़ायरफ़ॉक्स में वैसे भी) हमेशा मेरे समान input तत्वों की समान चौड़ाई नहीं है। यह आमतौर पर कुछ पिक्सेल द्वारा संकुचित होता है।

मैंने चौड़ाई को एक पिक्सेल आकार में बदलने की कोशिश की है (उदा। 200px) लेकिन इससे कोई फर्क नहीं पड़ता है।

इन सभी को एक ही चौड़ाई रखने का सबसे अच्छा तरीका क्या है? मुझे उम्मीद है कि यह select के width को व्यक्तिगत रूप से सेट करने या उन्हें टेबल में डालने का सहारा नहीं लेता है ...

Answer 1

समाधान प्रपत्र तत्वों के लिए बॉक्स मॉडल निर्दिष्ट करने के लिए है, और ब्राउज़र सहमत करते हैं (सिर्फ मार्जिन छोड़ दिया केवल स्थापित करने की तरह) सबसे आप सीमा-बॉक्स का उपयोग करें जब:

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

---

वहाँ normalize.css परियोजना है कि इस तरह के करतब को एकत्रित करती है।

Answer 2

पैडिंग टेक्स्ट को बॉक्स के किनारे के करीब बना देगा।

0px को मार्जिन सेट करने का प्रयास है, और है कि अगर सही लगता है, यह के साथ चारों ओर खेलने

Answer 3

तालिका कक्ष के साथ एक टेक्स्टबॉक्स (100% चौड़ाई के साथ भी) के साथ 100% चौड़ाई तालिका और कोशिकाओं के साथ समान समस्याएं थीं। , कभी

table td 
{ 
    padding-right: 8px; 
} 

नहीं सबसे अच्छा समाधान आप शायद सही पक्ष के लिए कुछ अतिरिक्त स्थान मिलता है कारण:

यह सीएसएस में मेरी समस्या हल। लेकिन कम से कम यह अब छुपा नहीं है!