float 및 익명 상자 레이블로 세로 정렬

Question

저는 CSS/HTML을 처음 사용하여 div.position 컨테이너 레이블에서 "제목"텍스트를 가져올 때 왜 쓰는지 이해하기가 어려웠습니다. 도와 주셔서 감사합니다.

My code

CSS 코드 :

div { 
    display: inline-block; 
} 
.position { 
    float: left; 
} 

HTML 코드 :

<div> 
    <label>Label</label> 
    <div class="group"> 
     <div class="position"> 
      <input type="radio" /> 
     </div> 
     Title 
    </div> 
</div> 

Answer 1

vertical-align의 기본값은 기준선입니다.

그런 이유로 상위 div의 기준선에 레이블이 표시됩니다. 제목 텍스트가 위치가 DIV의 높이를 div에 내에있을 때

그러나 작은 (이미지 참조) - 라벨 상단에 남아 것 같습니다 그 이유는. 실제로 그것은 부모 div의 기준선에 있습니다. 당신이 라벨에 vertical-align:top을 설정하면

그것이

FIDDLE

Answer 2

당신은에 레이블 플로트를 설정해야합니다 왼쪽 :

label { 
    float: left; 
} 

http://jsfiddle.net/w6kosc2v/2/

Answer 3

플로팅이 작동하는 방식에 대한 좋은 기사는 다음과 같습니다. All About Floats.

잠깐 말하면 플로트가 사용자가 설정 한쪽에 떠있게됩니다. float: right은 오른쪽으로 떠 다니고 이미지는 오른쪽으로 플로트되지만 다른 모든 인라인 요소는 플로트를 감싸는 경향이 있습니다. <label> 태그가 그랬습니다. .position에서 float: left을 삭제하거나 라벨에 추가하여 문제를 해결할 수 있습니다.

이 awnser가 다소 더 명확 해지기를 바랍니다.