पाठ को संरेखित करना और CSS में समान चौड़ाई के बक्से का चयन करना?

Question 1

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

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
        </select>
    </body>
</html>

क्या आपको लगता है कि यह सही होगा? नहीं। चयन बॉक्स फ़ायरफ़ॉक्स में 6px छोटा है। स्क्रीनशॉट देखें। फ़ायरफ़ॉक्स में स्क्रीनशॉट

ठीक है तो कोड को संपादित करने और दो शैलियों बनाने की सुविधा देता है।

<style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>

ठीक है कि काम करता है!

फ़ायरफ़ॉक्स में फिक्स्ड

ओह रुको, क्रोम में बेहतर परीक्षा ...

क्रोम स्क्रीनशॉट

FFFFFFFUUUUUUUUUUU

क्या कोई मुझे बता सकता है कि इन सभी ब्राउज़रों में कैसे लाइन अप करें? मैं केवल चौड़ाई क्यों नहीं कर सकता: 200px सभी पर, सभी ब्राउज़र इसे अलग तरीके से क्यों प्रदर्शित करते हैं? इसके अलावा जब हम इस पर होते हैं तो टेक्स्ट बॉक्स और बॉक्स का चयन अलग-अलग ऊंचाइयों पर क्यों होता है? हम उन्हें एक ही ऊंचाई पर कैसे पहुंचाएं? ऊँचाई और लाइन-ऊँचाई का कोई फायदा नहीं हुआ।

उपाय:

ठीक है, मैंने नीचे दिए गए उत्तरों से कुछ मदद के साथ समाधान पाया है। कुंजी बॉक्स-आकार का उपयोग करना है : सीमा-बॉक्स संपत्ति जब आप उस सीमा को निर्दिष्ट करते हैं जिसमें सीमा और गद्दी शामिल हैं। उत्कृष्ट विवरण यहाँ देखें । तब ब्राउज़र इसे भर नहीं सकता।

कोड नीचे है, बक्सों की ऊंचाई को भी उसी आकार में सेट किया है और बॉक्स के अंदर पाठ को इंडेंट किया है ताकि यह ऊपर की ओर बढ़े। आपको बॉर्डर सेट करने की भी आवश्यकता है क्योंकि क्रोम में बहुत ही अजीब दिखने वाली बॉर्डर है जो इसे चुनिंदा बॉक्स के लिए उपयोग करता है जो कि संरेखण को बाहर कर देगा। यह HTML5 साइटों (जैसे IE9, फ़ायरफ़ॉक्स, क्रोम, सफारी, ओपेरा आदि का समर्थन करने) के लिए काम करेगा।

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
                border: 1px solid #000;
                padding: 0;
                margin: 0;
                height: 22px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
            <option>123456789 123123123123</option>
            <option>123456789 123123123123 134213721381212</option>
        </select>
    </body>
</html>

केवल एक अंतिम चेतावनी आप इनपुट बटन, चेकबॉक्स आदि को इस स्टाइल में शामिल नहीं करना चाह सकते हैं, इसलिए input:not([type='button'])इसे कुछ प्रकारों पर लागू नहीं करने के लिए उपयोग करें या input[type='text'], input[type='password']उन लोगों को निर्दिष्ट करने के लिए उपयोग करें जिन्हें आप इसे लागू करना चाहते हैं।

Question 2

ऐसा इसलिए है क्योंकि <input type="text" />तत्व में तत्व के लिए थोड़ा अलग डिफ़ॉल्ट शैली है <select>जैसे सीमा, पैडिंग और मार्जिन मान भिन्न हो सकते हैं।

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

आपके पास दो विकल्प हैं:

स्पष्ट रूप से दोनों तत्वों के लिए समान होने के लिए सीमा, पैडिंग और मार्जिन मान सेट करें
अपने खुद के सीएसएस स्टाइलशीट से पहले शामिल होने के लिए एक सीएसएस रीसेट स्टाइलशीट

मैं विकल्प 1 के साथ जाऊंगा क्योंकि विकल्प 2 के लिए बहुत काम की आवश्यकता है और आप अनावश्यक सीएसएस के टन के साथ समाप्त हो जाएंगे। लेकिन कुछ वेब डेवलपर्स स्क्रैच से शुरू करना पसंद करते हैं और उनका पूरा नियंत्रण होता है।

Question 3

यह आपको पास मिलेगा, लेकिन सटीक का स्तर लगभग असंभव है।

<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
    <select id="Select1" style="width: 100%; margin: 0; padding: 0">
        <option>1</option>
    </select>
</div>

Question 4

अलग-अलग ब्राउज़र डिफ़ॉल्ट रूप से विभिन्न शैलियों को लागू करते हैं। मैंने पाया कि मार्जिन और पेडिंग दोनों को 0 पर रीसेट करना फ़ायरफ़ॉक्स और क्रोम दोनों तत्वों को समान चौड़ाई देता है।

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            input, select {
                margin: 0;
                padding: 0;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br />
        <select>
            <option>123</option>
        </select>
    </body>
</html>

मैं व्यक्तिगत रूप से एक न्यूनतम सीएसएस रीसेट स्टाइलशीट का उपयोग करना पसंद करता हूं जैसे कि कई ब्राउज़रों में डिजाइन को शानदार बनाने का प्रयास करने से पहले YUI सीएसएस रीसेट ।

Question 5

प्रश्न में चयन और इनपुट टैग दोनों के लिए एक वर्ग जोड़ें:

<input class='custom-input'/>
<select class='custom-input'></select>

फिर अपने डिजाइन को फिट करने के लिए नीचे दिए गए सीएसएस को संशोधित करें:

.custom-input {
        width:140px;
        border:1px solid #ccc;
        margin:1px;
        padding:3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
    }

obvs यह ब्राउज़र का समर्थन करने के लिए एक फिक्स है

Question 6

यदि यू टेबल का उपयोग करते हैं तो 4 इनपुट यू निम्न समाधान का उपयोग कर सकते हैं - यानी 7 के साथ भी अनुकूलनीय:

<tr style="width:1px;"><td style="width:inherit;position:relative;">
    <select style="width:100%;"> 
    </select> 
</td></tr>
<tr><td>
    <input type="text" style="width:150px;"/>
</td></tr>

इस तरह से इनपुट की चौड़ाई के लिए टेबल सेल की चौड़ाई तय की जाएगी,

और इस तरह से चयन हमेशा शेष चौड़ाई को ले जाएगा और पूरी तरह से डी इनपुट के साथ लाइन करेगा।

Question 7

दोनों तत्वों से डिफ़ॉल्ट सीमाओं को हटाने का प्रयास करें:

select, input {
 border:0;
}

Question 8

हां, बेहद निराशा होती है। हालाँकि, मुझे अपने HTML पेज के शीर्ष पर "<! DOCTYPE html>" टैग लगाने तक की समस्या कभी नहीं हुई। मेरे वेबपेज ने सभी प्लेटफार्मों पर ठीक से प्रस्तुत किया है जो मैं तब तक परीक्षण कर सकता था जब तक मैं उस टैग को अपने दस्तावेज़ के शीर्ष पर नहीं रखता।

जबकि यह "वास्तविक कल्पना" है, यह इन संरेखण समस्याओं का स्रोत प्रतीत होता है। एफडब्ल्यूआईडब्ल्यू, मैं एचटीएमएल 5 निर्दिष्ट करने के लिए उस टैग के बिना एचटीएमएल 5 तत्वों, इन-लाइन सीएसएस आदि का उपयोग कर रहा हूं। YMMV।