सीएसएस लेबल की चौड़ाई प्रभावी नहीं है

Question

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

HTML:

<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
    <p>
        <label for="id_title">Title:</label> 
        <input id="id_title" type="text" class="input-text" name="title"></p>
    <p>
        <label for="id_description">Description:</label> 
        <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
    <p>
        <label for="id_report">Upload Report:</label> 
        <input id="id_report" type="file" class="input-file" name="report">
    </p>
</form>

सीएसएस:

#report-upload-form {
    background-color: #316091;
    color: #ddeff1;
    font-weight:bold;
    margin: 23px auto 0 auto;
    border-radius:10px;
    width: 650px;
    box-shadow:  0 0 2px 2px #d9d9d9;
}

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
}

#report-upload-form input[type=text], 
#report-upload-form input[type=file],
#report-upload-form textarea {
    width: 305px;
}

आउटपुट:

jsFiddle

मैं क्या गलत कर रहा हूं?

Comments

वैसे, क्या <p>टैग में फ़ॉर्म अनुभागों को लपेटना वास्तव में एक अच्छा विचार है?

— 22

Answer 1

करें display: inline-block:

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
    display:inline-block
}

http://jsfiddle.net/aqMN4/

Comments

इनलाइन-ब्लॉक के साथ छड़ी। IE7, IE8, IE9, FF

— डेविस

क्या प्रत्येक तत्व को <p> में रखने के लिए एक वर्कअराउंड है?

— कोलिन डी

@ColinD मैं div का उपयोग करने की सलाह दूंगा, न कि <p> टैग।

— डेविस

Answer 2

उपयोग display: inline-block;

स्पष्टीकरण:

labelजिसका अर्थ यह केवल बड़े रूप में है के रूप में यह करने की जरूरत है एक इनलाइन तत्व है,।

प्रॉपर्टी को प्रभावी बनाने के लिए या displayतो प्रॉपर्टी सेट करें ।inline-blockblockwidth

उदाहरण:

#report-upload-form {
    background-color: #316091;
    color: #ddeff1;
    font-weight: bold;
    margin: 23px auto 0 auto;
    border-radius: 10px;
    width: 650px;
    box-shadow: 0 0 2px 2px #d9d9d9;

}

#report-upload-form label {
    padding-left: 26px;
    width: 125px;
    text-transform: uppercase;
    display: inline-block;
}

#report-upload-form input[type=text], 
#report-upload-form input[type=file],
#report-upload-form textarea {
    width: 305px;
}

<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
    <p><label for="id_title">Title:</label> <input id="id_title" type="text" class="input-text" name="title"></p>
    <p><label for="id_description">Description:</label> <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
    <p><label for="id_report">Upload Report:</label> <input id="id_report" type="file" class="input-file" name="report"></p>
</form>

Comments

धन्यवाद! इनलाइन-ब्लॉक वह है जो मुझे चाहिए। ब्लॉक करना अजीब लगता है।

— TheOne

ध्यान रखें कि IE8 के नीचे IE में इनलाइन-ब्लॉक का समर्थन स्केच है - शायद इन दिनों बहुत अधिक समस्या नहीं है, लेकिन कुछ को ध्यान में रखना है। (source quirksmode.org/css/display.html )

— n00dle

@PandaWood क्षमा करें, इस पोस्ट पर टिप्पणी करने के बाद आपको लगभग 2 वर्ष हो गए हैं। लेकिन, मैं आपकी टिप्पणी का जवाब दे रहा हूं ताकि अन्य पाठक इस पोस्ट के लेखक द्वारा दिए गए स्पष्टीकरण से गुमराह न हों। उत्तरार्द्ध ने तर्क दिया है कि labelतत्व widthसंपत्ति का सम्मान नहीं करता है क्योंकि यह एक इनलाइन तत्व है। मैं यह बताना चाहूंगा कि inputतत्व डिफ़ॉल्ट रूप से एक इनलाइन तत्व भी है। लेकिन यह labelतत्व के विपरीत चौड़ाई की संपत्ति का उपयोग करके इसकी चौड़ाई को बदलने की अनुमति देता है । इसलिए लेखक द्वारा तर्क सही नहीं है।

— ghd

Answer 3

मेरा मानना ​​है कि लेबल इनलाइन हैं, और इसलिए वे चौड़ाई नहीं लेते हैं। शायद "प्रदर्शन: ब्लॉक" का उपयोग करके और वहां से जाने का प्रयास करें।

Answer 4

इसे पहले एक ब्लॉक बनाएं, फिर अगले ब्लॉक को एक नई लाइन पर धकेलने के लिए बाईं ओर फ्लोट करें।

#report-upload-form label {
                           padding-left:26px;
                           width:125px;
                           text-transform: uppercase;
                           display:block;
                           float:left
}

Answer 5

शैली दे

display:inline-block;

उम्मीद है कि इससे मदद मिलेगी '

Answer 6

labelडिफ़ॉल्ट displayमोड है inline, जिसका अर्थ है कि यह स्वचालित रूप से सामग्री के आकार का है। एक चौड़ाई सेट करने के लिए आपको सेट करने की आवश्यकता होगी display:blockऔर फिर इसे सही तरीके से पोस्ट करने के लिए कुछ फ़फ़िंग करना होगा (शायद शामिल करना float)