चेकबॉक्स

Question

के तहत रैपिंग से टेक्स्ट को रोकें। मैं चेकबॉक्स का एक सेट डाल रहा हूं और यदि टेक्स्ट बहुत लंबा है तो मैं चेकबॉक्स के नीचे टेक्स्ट रैपिंग के पुराने पुराने अंक में चल रहा हूं।

मेरे HTML:

<div class="right"> 
    <form id="updateProfile"> 
     <fieldset class="checkboxes"> 
      <p>4. What is your favorite type of vacation?</p> 
      <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label> 
      <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label> 
      <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label> 
      <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label> 
      <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label> 
      <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label> 
      <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label> 
      <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label> 
      <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label> 
      <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label> 
      <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label> 
     </fieldset> 
    </form> 
</div> 

मेरे सीएसएस:

div.right{width:580px;} 

form#updateProfile fieldset label{ 
    display: block; 
    margin-bottom: 5px; 
    font-size: 16px; 
    float: left; 
    width: 33%; 
} 

देखें मेरी यहाँ बेला: http://jsfiddle.net/fmpeyton/7WmGr/

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

धन्यवाद!

Answer 1

यह काम करने के लिए लगता है:

http://jsfiddle.net/7WmGr/5/

मैं label 18px और चेक बॉक्स -18px के margin-left के margin-left दे दी है।

HTML:

<div class="right"> 
    <form id="updateProfile"> 
     <fieldset class="checkboxes"> 
      <p>4. What is your favorite type of vacation?</p> 
      <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label> 
      <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label> 
      <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label> 
      <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label> 
      <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label> 
      <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label> 
      <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label> 
      <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label> 
      <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label> 
      <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label> 
      <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label> 
     </fieldset> 
    </form> 
</div> 

सीएसएस:

div.right{width:598px;} 

form#updateProfile fieldset label{ 
    display: block; 
    margin-bottom: 5px; 
    font-size: 16px; 
    float: left; 
    width: 30%; 
    margin-left:18px; 
} 
form#updateProfile fieldset label input[type='checkbox']{margin-left:-18px;} 

Crome & IE9 में काम करने लगता है।

Answer 2

एक विकल्प ऐसा कुछ होगा।

form#updateProfile fieldset label{ 
    display: block; 
    margin-bottom: 5px; 
    font-size: 16px; 
    float: left; 
    width: 30%; 
    padding-left: 3%; 
    position: relative; 
} 

input { 
    position: absolute; 
    left: -5px; 
} 

यहाँ डेमो: http://jsbin.com/opoqon/1/edit

तरह से मैं यह करने के लिए करते हैं अलग है, जो labels साथ inputs लपेटकर नहीं है, बल्कि

<input id="ski-trips" type="checkbox" name="vacation" value="Ski Trips"><label for="ski-trips">Ski Trips</label> 

जो तब आसान स्टाइल के लिए अनुमति देता है की तरह कुछ कर रही ।

यहाँ इस तरह का एक उदाहरण है: http://jsbin.com/otezut/1/edit

लेकिन किसी भी तरह से काम करेगा।

Answer 3

यह एक और विकल्प है। यह अभी तक बहुत आसान है। आप उस भाग को लेते हैं जो लपेट रहा है। <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label> और आप कक्षा के साथ एक अवधि जोड़ते हैं। मैंने क्लास एंटीवाप कहा। फिर आप इसे बाएं मार्जिन जोड़ने के लिए सीएसएस का उपयोग करते हैं। .antiWrap { margin-left: 18px; } यहां आपके कोड का उपयोग कर Myfiddle आधारित है। http://jsfiddle.net/alexhram/7WmGr/3/ मुझे लगता है कि यह आपके लिए क्या चल रहा है? मुझे बताएं।

Answer 4

मुझे यह पसंद है ...

HTML:

<input type="checkbox" name="vacation" value="Ski Trips"><label>very long label ...</label> 

सीएसएस:

input[type="checkbox"] { 
    position: absolute; 
} 
input[type="checkbox"] ~ label { 
    padding-left:1.4em; 
    display:inline-block; 
} 

Answer 5

यहाँ एक है कि इनपुट तत्वों का आकार पर अधिक निर्भर नहीं है।

div {width: 12em;} 
 

 
label { 
 
    display: block; 
 
    white-space: nowrap; 
 
    margin: 10px; 
 
} 
 

 
label input { 
 
    vertical-align: middle; 
 
} 
 

 
label span { 
 
    display: inline-block; 
 
    white-space: normal; 
 
    vertical-align: top; 
 
    position: relative; 
 
    top: 2px; 
 
}

<div> 
 

 
<label><input type="radio"><span>I won't wrap</span></label> 
 
<label><input type="checkbox"><span>I won't wrap</span></label> 
 

 
<label><input type="radio"><span>I am a long label which will wrap</span></label> 
 
<label><input type="checkbox"><span>I am a long label, I will wrap beside the input</span></label> 
 

 
</div>