체크 상자의 인라인 목록으로 제어 텍스트 배치

Question

값이있는 체크 박스 목록이 있습니다. 그 (것)들을 표시하기 위하여는 그 (것)들이 그 (것)들에서 체크 박스를 나누기없이 다음 선에 포장 할 것이다 그래야 관련 원본 가치.

<ul> 
    {% for c in categories %} 
     <li> 
      <input name="cat_checks" type="checkbox" value="{{c}}" />{{c}} 
     </li> 
    {%endfor %} 
</ul> 

Answer 1

첫째, LABEL 요소 사용 :

label { white-space:nowrap; } 

라이브 데모 :

<label> <input type="checkbox" value="foo"> foo </label> 

둘째, 라벨이 CSS를 정의

여기에 예를 참조하십시오http://jsfiddle.net/4uhKp/

btw, LABEL 요소의 줄 바꿈 확인란은이 문제뿐만 아니라 일반적으로 좋습니다. 그렇게하면 사용자는 확인란 안의 ​​텍스트 (레이블 안에 있음)를 클릭하여 확인란을 전환 할 수 있습니다.

Answer 2

플로트 각 li 대신 인라인으로 지정하십시오. http://jsfiddle.net/marcuswhybrow/afdrT/8/이