체크 박스 아래에 텍스트 줄 바꿈 방지

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> 

내 CSS :

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> 

CSS :

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

내가하는 경향이 방법은보다는 쉽게 스타일링 할 수 있습니다

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

같은 일을하고, labels와 inputs 포장되지 않은, 다른 . 여기

그 방법의 예입니다 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>이고 클래스가있는 범위를 추가합니다. 나는 반 래핑이라고 불렀다. 그런 다음 CSS를 사용하여 왼쪽 여백을 추가하십시오. .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> 

CSS :

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>