왜 float없이 라벨의 너비 CSS 속성이 작동하지 않습니까?

Question

저는 CSS가 처음이에요. 한 가지 질문이 있습니다. 나는 좋은 간단한 양식을하고 싶습니다, 다음과 같은 코드가있다 :

<form> 
    <div class="row"><label for="name">Some text field</label><input type="text" name="name" /></div> 
    <div class="row"><label for="surname">Some another text field</label><input type="text" name="surname" /></div> 
</form> 

일부 CSS 코드 :

label { 
    float: left; 
    width: 230px; 
    text-align: right; 
    margin: 5px; 
} 

.row { 
    clear: left; 
} 

내가 복사하고 어떤 책이 코드를 붙여 넣습니다. 나는 플로팅, 클리어링을 이해하지만 "인라인 요소"때문에 라벨에서 "너비"속성이 작동하는 이유를 모르며,이 경우 "너비"가 "float"없이 작동하지 않는 이유는 무엇입니까? 제발, 분명히 해줘 요. 감사합니다

Answer 1

레이블 요소의 기본값은 디스플레이 모드 inline입니다.

인라인 요소는 width 속성을 허용하지 않으므로 내용의 너비로 렌더링됩니다.

플로팅 요소는 인라인 블록과 비슷합니다. 너비 속성을 허용합니다.

본질적으로 변경하려는 요소에 float 속성을 적용하면 display 속성이 (정확히는 아님) inline-block과 같은 속성으로 적용됩니다.

Answer 2

label은 인라인 요소이므로 너비를 허용하지 않습니다. 요소의 너비를 허용하려면 inline-block 또는 block 요소 중 하나 여야합니다. 그리고 float을 다음과 같이 동작하는 요소에 설정하면 inline-block 요소이고 절대 위치 또는 고정 위치에 대한 또 다른 정보는 블록 수준 요소이기 때문에 생각할 수 있습니다.

label 너비를 허용하려면 레이블을 inline-block으로 정의해야합니다.

label { 
    /*float: left;*/ 
    display: inline-block; 
    width: 230px; 
    text-align: right; 
    margin: 5px; 
}