흐름 레이아웃에서 내용이 줄 바꿈 될 때 라디오 버튼 또는 확인란과 레이블을 함께 유지하는 방법

Question

브라우저 창을 좁힐 때 텍스트가 감길 때 라디오 버튼() 또는 확인란과 함께 레이블을 유지하는 방법 우리는 이것으로 끝나지 않습니다.

  [ ] pepperoni [ ] anchovies [ ] mushrooms [ ] 
      olives 

편집 됨 nowrap suggestions에 대한 응답으로. 제안 해 주셔서 감사합니다. 거의 다 왔어. Chrome, FF 및 Opera 에서는 완벽하게 작동하지만 IE9에서는 작동하지 않습니다.. 페이지 CSS는 label {white-space: nowrap}하고 마크 업 인 경우 :

  <td> 
      <div> 
      <label> 
      <input type="radio" name="pizza" checked="true" 
      id="pepperoni" value="pepperoni" />pepperoni </label> 
      <label> 
      <input type="radio" name="pizza" 
      id="anchovies" value="anchovies" />anchovies </label> 
      <label> 
      <input type="radio" name="pizza" 
      id="mushrooms" value="mushrooms" />mushrooms </label> 
      <label> 
      <input type="radio" name="pizza" 
      id="olives" value="olives" />olives   </label> 
      </div> 
      </td> 

TD를가 IE9에서 고정 폭 된다; 브라우저 창이 좁아 때 TD는 축소되지 않습니다, 나는이 얻을 :

  (] pepperoni () anchovies () mushrooms () olives 

나는이 필요합니다

  () pepperoni () anchovies 
      () mushrooms () olives 

IE9에 대한 추가 트릭 거기를? 나는 라벨 사이에 하나의 공백을 포함하는 스팬을 넣으려고했다 : ...</label><span> </span><label>...하지만 작동하지 않았다.

Answer 1

둘 다 <span> 컨테이너로 둘러싸고 white-space: nowrap;으로 설정하십시오.

<span style="white-space: nowrap;"> 
    <input type="checkbox" id="in1" /> 
    <label for="in1">pepperoni</label> 
</span> 
<span style="white-space: nowrap;"> 
    <input type="checkbox" id="in2" /> 
    <label for="in2">anchovies</label> 
</span> 
<span style="white-space: nowrap;"> 
    <input type="checkbox" id="in3" /> 
    <label for="in3">mushrooms</label> 
</span> 
<span style="white-space: nowrap;"> 
    <input type="checkbox" id="in4" /> 
    <label for="in4">olives</label> 
</span> 

편집 @xiaoyi에서 언급 한 바와 같이

, 당신은 또한 컨테이너로 <label> 자체를 사용할 수 있습니다 :이 작업을 관리 할 수 ​​

<label style="white-space: nowrap;"> <input type="checkbox" /> pepperoni</label> 
<!-- etc --> 

Answer 2

사용 CSS 스타일, 은 절대적으로 위치를 지정 각 구성 요소 위치 좌표를 수동으로 제공하십시오.

Answer 3

설정 체크 박스 자체

<input type="checkbox" style="height:13px;"> 

Answer 4

에 엄격한 높이 당신은 <span>에서 입력 및 라벨을 포장 또는 라벨 내부의 입력을 포장 할 수 있습니다. 어느 쪽이든 외부 컨테이너 (스팬 또는 레이블)의 스타일은 white-space:nowrap; display:inline-block이어야합니다. 이 기능은 IE9 및 다른 브라우저에서도 작동합니다. 그래서 최종 마크 업해야합니다 :

<span style="white-space:nowrap; display:inline-block"> 
    <input type="checkbox" name="pizza" checked="true" 
    id="pepperoni" value="pepperoni" /> 
    <label for="pepperoni">pepperoni</label> 
</span> 

또는 방법`<입력 유형 = "텍스트 상자"> XXX`에 대한

<label style="white-space:nowrap; display:inline-block"> 
    <input type="checkbox" name="pizza" checked="true" 
    id="pepperoni" value="pepperoni"/> 
    pepperoni 
</label>