नाओप/इनपुट के बाद लाइन को तोड़ें

Question

यदि मेरे पास उनके लेबल के बाद कई इनपुट (रेडियो या विकल्प) हैं, तो सभी एक ही पंक्ति पर हैं। मैं इसे कैसे बना सकता हूं ताकि यह रेडियो के बाद लाइन को तोड़ न सके, लेकिन लेबल के बाद की आवश्यकता होने पर तोड़ें।

<input type="radio" id="i1"/><label for="i1">First radio</label> 
<input type="radio" id="i2"/><label for="i2">Second radio</label> 
<input type="radio" id="i3"/><label for="i3">Third radio</label> 

मैं nowrap के साथ एक span में दोनों input और label लपेटकर के बारे में सोच है, लेकिन आश्चर्य है कि वहाँ एक और तरीका है सकते हैं।

Answer 1

इस चाल करना चाहिए:

#MyDiv {width: 250px;}

<div id="MyDiv"> 
 
    <nobr><input type="radio" id="i1"/><label for="i1">First radio</label></nobr> 
 
    <nobr><input type="radio" id="i2"/><label for="i2">Second radio</label></nobr> 
 
    <nobr><input type="radio" id="i3"/><label for="i3">Third radio</label></nobr> 
 
</div>

<nobr> टैग ब्रेक बटन और लेबल के बीच नहीं होगा सुनिश्चित करेगा।

सीएसएस मार्ग भी संभव है, इसे <span> के साथ लपेटना और white-space: nowrap; का उपयोग करना ठीक काम करना चाहिए।

Answer 2

मैं इस बारे में सोच रहा है कि आप क्या देख रहे हैं: http://jsfiddle.net/catalinred/kNUaz/

Answer 3

मुझे कुछ नहीं के लिए काम किया (या कम से कम मुझे ऐसा लगा, जब तक मैं यह तय हो गई) ... मेरे गंदे समाधान इसलिए तालिकाओं का उपयोग करने के लिए था , 1 पंक्ति, एकाधिक कॉलम। आपको पैडिंग/रिक्ति को समायोजित करने की आवश्यकता हो सकती है।

संपादित करें: चेतावनी यह चीजों को करने का एक बुरा तरीका है, लेकिन यदि कुछ भी काम नहीं करता है तो इससे मदद मिल सकती है।

     <table border="0" > 
          <tbody> 
          <tr> 
           <td><input name="gender" type="radio" value="male" checked> Male </td> 
           <td><input name="gender" type="radio" value="female"> Female </td> 
          </tr> 
          </tbody> 
         </table>