मैं टेक्स्ट इनपुट फ़ील्ड की ऊंचाइयों को कैसे बराबर कर सकता हूं?

मेरे <select..> तत्वों और मेरे <input type="text"..> तत्वों की ऊंचाई को बराबर करने का सबसे अच्छा तरीका क्या है? यह बॉक्स आकार के मॉडल में मतभेदों के कारण मुश्किल साबित हो रहा है।मैं टेक्स्ट इनपुट फ़ील्ड की ऊंचाइयों को कैसे बराबर कर सकता हूं?

गूगल क्रोम की उपयोगकर्ता एजेंट स्टाइलशीट इस है:

select { -webkit-box-sizing: border-box; }

..whereas अन्य पाठ इनपुट क्षेत्रों सामग्री बॉक्स मॉडल का उपयोग करें। अंतर क्यों? क्या मुझे शायद मेरे सभी टेक्स्ट-आधारित इनपुट फ़ील्ड सीमा-बॉक्स मॉडल का उपयोग करना चाहिए?

बीटीडब्ल्यू, मैं मानक-अनुरूप मोड का उपयोग कर रहा हूं (<!DOCTYPE html> का उपयोग करके)।

स्रोत

2010-04-15 David

एक दिलचस्प सवाल जिसके लिए मेरे पास कोई जवाब नहीं है। यदि आपको यहां कुछ भी नहीं मिलता है, तो शायद http: // doctype पर फिर से पूछें।कॉम/ –

संभावित डुप्लिकेट [HTML में इनपुट और टेक्स्ट इनपुट का चयन करें - बराबर चौड़ाई बनाने का सबसे अच्छा तरीका?] (http://stackoverflow.com/questions/895904/select-inputs-and-text-inputs-in-html- बेस्ट-वे-टू-मेक-बराबर-चौड़ाई) –

शायद मैं आधार से बाहर हूं लेकिन क्या आपने लाइन-ऊंचाई मानों का उपयोग करने का प्रयास किया है?

स्रोत

2010-04-16 17:31:26 Montane

क्या आप स्पष्ट रूप से सभी इनपुट की हाइट सेट नहीं कर सकते हैं और सीएसएस का उपयोग करके विशिष्ट पिक्सेल ऊंचाई पर फ़ील्ड का चयन नहीं कर सकते? यदि यह सीमाओं की वजह से समान ऊंचाई की तरह "दिखता" नहीं है, तो सीमाओं को हटा दें या उन्हें समान रूप से समान रूप से सेट करें। उदाहरण के लिए:

<html> 
    <body> 
    <input type=text style="border: 1px solid black; height: 37px;">&nbsp; 
    <select style="border: 1px solid black; height: 37px; line-height: 37px; font-size: 28px;"></select>&nbsp; 
    <input type=button style="border: 1px solid black; height: 37px;"> 
    </body> 
</html>

इससे सभी तीन फॉर्म फ़ील्ड 37 पिक्सेल ऊंचे होते हैं। आईई और क्रोम पर काम करता है, लेकिन मैंने इसे कहीं और परीक्षण नहीं किया है।

वैकल्पिक रूप से, पृष्ठ लोड हो जाने के बाद, सभी फॉर्म फ़ील्ड के माध्यम से लूप, सबसे बड़ा ढूंढें, और अपनी शैली का उपयोग करके दूसरों की हाइट सेट करें। हाइट विशेषता।

स्रोत

2010-04-16 17:49:23 Sparafusile

समस्या यह है कि अलग-अलग बॉक्स-आकार वाले मॉडल अलग-अलग ऊंचाई की अवधारणा का इलाज करते हैं, और ब्राउज़र के आकार में असंगतता दिखाई देती है, जिसके आधार पर बॉक्स-आकार वाले मॉडल लागू होते हैं नियंत्रित करता है। – David

मेरे संपादन देखें। आपके द्वारा बताए गए तरीकों के आस-पास के तरीके हैं, आपको बस अलग-अलग शैलियों का प्रयास करना होगा। – Sparafusile

हाँ .. यह बेहद मुश्किल है।
यह न भूलें कि फ़ायरफ़ॉक्स उपचार फ़ॉर्म तत्वों के साथ-साथ समस्याएं भी अलग-अलग हैं। क्रॉस ब्राउज़र फॉर्म मैनिपुलेशन सबसे अच्छा असंभव है। : डी

कुछ चीजों को ध्यान में रखना। रेखा-ऊंचाई का उपयोग सभी तत्वों पर नहीं किया जा सकता है .. यानी। फ़ायरफ़ॉक्स हार्ड कोड इनपुट [टाइप = टेक्स्ट] तत्वों के लिए एक पंक्ति ऊंचाई।

मैं इनलाइन-ब्लॉक और ऊर्ध्वाधर संरेखित का उपयोग करने पर एक लेख है, कुछ मदद मिल सकती है जो है .. (verital पंक्ति का उपयोग करें: आधारभूत;) The Joys of Inline Block at screwlewse.com

इसके अलावा कई नए ब्राउज़रों इस क्रोम जोड़ लिया है कि दिमाग में रखना ओएस की तरह दिखने के लिए फॉर्म इनपुट बनाने के लिए। (लेकिन यह एक अलग मुद्दा की तरह दिखता है)

स्रोत

2010-04-17 01:39:16

कैसे?

select {padding: 1px;}

स्रोत

2010-11-14 00:32:11 James

हां, आपको सभी "टेक्स्ट-आधारित इनपुट फ़ील्ड सीमा-बॉक्स मॉडल का उपयोग करने" का उपयोग करना चाहिए।

यह पहले से ही कई अन्य SO प्रश्नों, such as here में उत्तर दिया गया है।

तथ्य यह है कि व्हाटवाग/डब्ल्यू 3 सी ने वर्तमान सीमा-बॉक्स मॉडल को स्वीकार किया है, यह काफी विषम है।
कि उन्होंने इसे लगातार नहीं किया है, यह भी गंध है।

एक सतत डिज़ाइन बनाने के लिए डिफ़ॉल्ट को ओवरराइट करने में कुछ भी गलत नहीं है।
कोई अन्य समाधान नहीं है जो विश्वसनीय या सही है।

स्रोत

2012-09-06 11:58:15 SamGoody

मैं टेक्स्ट इनपुट फ़ील्ड की ऊंचाइयों को कैसे बराबर कर सकता हूं?

उत्तर

संबंधित मुद्दे