दिलचस्प पोस्ट
मैं jQuery के उपयोग से कई तत्वों को क्रमिक रूप से कैसे सजीव कर सकता हूं? Iframe में जावास्क्रिप्ट फ़ंक्शन कॉल करना क्यों एक जेएसपी पृष्ठ सत्र = "झूठे" निर्देश सेट? जावा में पार्सिंग सीएसवी ओवरराइडिंग बनाम छुपा जावा – उलझन में कीबोर्ड इनपुट और Win32 संदेश लूप एकाधिक, अनुक्रमिक लाने () वादा क्या एक लॉक ऑब्जेक्ट लॉक किया जाता है अगर इसमें कोई अपवाद होता है? पायथन आयात कोडिंग शैली वस्तु स्ट्रिंग को JSON में कनवर्ट करें C ++ में क्लास के सदस्यों को संदर्भित करने के लिए मैं डॉट, एरो, या डबल कॉलन का उपयोग कब करता हूं? वर्तमान मुद्रित कंसोल लाइन मिटा दें कैसे mysql में levenshtein समारोह जोड़ने के लिए? फोल्ड विंडो। ओपन () क्रोम में नया टैब बनाने के लिए मैं एक डीजेंगो ऐप के बाहर एक मॉडल को कैसे बदलूं और एक नए में?

रेडियो बटन और एक ही लाइन में प्रदर्शित करने के लिए लेबल

क्यों मेरे लेबल और रेडियो बटन एक ही पंक्ति में नहीं रहेंगे, मैं क्या कर सकता हूं?

यहां मेरा फ़ॉर्म है:

<form name="submit" id="submit" action="#" method="post"> <?php echo form_hidden('what', 'item-'.$identifier);?> <label for="one">First Item</label> <input type="radio" id="one" name="first_item" value="1" /> <label for="two">Second Item</label> <input type="radio" id="two" name="first_item" value="2" /> <input class="submit_form" name="submit" type="submit" value="Choose" tabindex="4" /> </form> 

वेब के समाधान से एकत्रित समाधान "रेडियो बटन और एक ही लाइन में प्रदर्शित करने के लिए लेबल"

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

और हाँ, आप अपने रेडियो बटन को पुराने आईई के लिए एक क्लास का नाम बनाना चाहते हैं। और उन सभी को एक ही रेखा पर रखने के लिए, ऊपर दिए गए मार्कअप के अनुसार, यह ऐसा ही होगा:

 <fieldset> <div class="some-class"> <input type="radio" class="radio" name="x" value="y" id="y" /> <label for="y">Thing 1</label> <input type="radio" class="radio" name="x" value="z" id="z" /> <label for="z">Thing 2</label> </div> </fieldset> 

इसका मतलब है कि आपका स्टार्टर सीएसएस कुछ ऐसा होगा:

 fieldset { overflow: hidden } .some-class { float: left; clear: none; } label { float: left; clear: none; display: block; padding: 2px 1em 0 0; } input[type=radio], input.radio { float: left; clear: none; margin: 2px 0 0 2px; } 

मैंने हमेशा क्या किया है सिर्फ लेबल के अंदर रेडियो बटन लपेटता है …

 <label for="one"> <input type="radio" id="one" name="first_item" value="1" /> First Item </label> 

ऐसा कुछ, हमेशा मेरे लिए काम किया है

हो सकता है कि आपके सीएसएस में कहीं भी आपके इनपुट टैग के लिए निर्दिष्ट चौड़ाई हो।

अपने रेडियो बक्से के लिए एक class="radio" जोड़ें और एक input.radio {width: auto;} अपने सीएसएस पर जोड़ें

display:inline करने के लिए उन्हें दोनों रखें display:inline

हम्म। डिफ़ॉल्ट रूप से, <label> display: inline; और <input> है (लगभग, कम से कम) display: inline-block; , इसलिए उन्हें दोनों एक ही पंक्ति पर होना चाहिए। http://jsfiddle.net/BJU4f/ देखें

शायद एक स्टाइलशीट display: block करने के लिए label या input सेट कर रहा है display: block ?

मैं यह सोच रहा हूं कि वे अलग-अलग लाइनों पर लपेटते हैं जब खिड़की बहुत संकीर्ण होती है। जैसा कि दूसरों ने ध्यान दिया है, डिफ़ॉल्ट रूप से लेबल और इनपुट "प्रदर्शन: इनलाइन" होना चाहिए, ताकि जब तक आपके पास अन्य शैली नियम न हो जाएं जो इसे बदल रहे हों, यदि वहां कमरा है, तो उन्हें उसी पंक्ति पर रेंडर करना चाहिए

मार्कअप को बदलने के बिना, केवल सीएसएस का उपयोग करके इसे ठीक करने का कोई तरीका नहीं होगा।

इसे ठीक करने का सबसे सरल तरीका एक ब्लॉक तत्व, जैसे कि p या एक div में रेडियो बटन और लेबल div , और फिर इसे white-space:nowrap का उपयोग करके लपेटने से रोका जा सके white-space:nowrap । उदाहरण के लिए:

 <div style="white-space:nowrap;"> <label for="one">First Item</label> <input type="radio" id="one" name="first_item" value="1" /> </div> 

मैं इस कोड का उपयोग करता हूं और ठीक काम करता हूं:

 input[type="checkbox"], input[type="radio"], input.radio, input.checkbox { vertical-align:text-top; width:13px; height:13px; padding:0; margin:0; position:relative; overflow:hidden; top:2px; } 

आप शीर्ष मूल्य को पुनर्स्थापित करना चाह सकते हैं (आपकी line-height पर निर्भर करता है) यदि आप IE6 संगतता नहीं चाहते हैं, तो आपको यह कोड आपके पृष्ठ में डाल देना होगा। अन्यथा, आपको अपने इनपुट के लिए अतिरिक्त क्लास जोड़ना होगा (आप jQuery का उपयोग कर सकते हैं – या किसी अन्य लायब्रेरी – उस थोर के लिए;))

मैं Google Chrome 4.0, IE8, या Firefox 3.5 में उस समस्या का पुन: उत्पन्न करने में सक्षम नहीं था। लेबल और रेडियो बटन एक ही पंक्ति पर बने रहे।

इन दोनों को एक <p> टैग के अंदर डालने का प्रयास करें, या एलियट जेंटलमैन की तरह इनलाइन होने के लिए रेडियो बटन सेट करें।

एक ही विषय पर एक अलग पोस्ट से मेरा जवाब आपको लेबल से इनपुट निकालने के लिए multicheckbox फ़ॉर्म के लिए ज़ेंड करना चाहिए

नोट: परंपरागत रूप से लेबल टैग का उपयोग मेनू के लिए है उदाहरण के लिए:

 <menu> <label>Option 1</label> <input type="radio" id="opt1"> <label>Option 2</label> <input type="radio" id="opt2"> <label>Option 3</label> <input type="radio" id="opt3"> </menu> 

मुझे एक ही लाइन पर सभी रेडियो बटन रखने का एक समान मुद्दा था। मैं जो कुछ भी कर सकता था कोशिश करने के बाद, निम्नलिखित के अलावा कुछ भी मेरे लिए काम नहीं किया। मेरा क्या मतलब है कि बस तालिका का उपयोग करके रेडियों बटन को एक ही पंक्ति में प्रदर्शित होने की इजाजत को हल किया।

 <table> <tr> <td> <label> @Html.RadioButton("p_sortForPatch", "byName", new { @checked = "checked", @class = "radio" }) By Name </label> </td> <td> <label> @Html.RadioButton("p_sortForPatch", "byDate", new { @class = "radio" }) By Date </label> </td> </tr> </table> 

यदि समस्या यह है कि लेबल और इनपुट दो पंक्तियों के लिए लपेट रहे हैं, जब विंडो बहुत संकीर्ण हो, तो उनके बीच सफेद स्थान को हटा दें; उदाहरण के लिए:

 <label for="one">First Item</label> <input type="radio" id="one" name="first_item" value="1" /> 

यदि आपको तत्वों के बीच स्थान की आवश्यकता है, तो गैर-ब्रेकिंग रिक्त स्थान ( &amp; nbsp; ) या सीएसएस का उपयोग करें।

मैं हमेशा float:left का उपयोग करने से बचता हूं float:left लेकिन इसके बजाय मैं display: inline उपयोग display: inline हूं display: inline

 .wrapper-class input[type="radio"] { width: 15px; } .wrapper-class label { display: inline; margin-left: 5px; } 
 <div class="wrapper-class"> <input type="radio" id="radio1"> <label for="radio1">Test Radio</label> </div>