레이블 및 입력 필드가 서로 나란히 놓이지 않습니다

Question

다음 코드는 레이블과 입력 필드를 서로 나란히 놓아야합니다. 문제가 무엇인지 알 수 있습니까?

.form{ 
    width:500px; 
    float:left; 
    padding:20px 50px; 
    background-color:orange; 
} 

label.form{ 
    float:left; 
    clear:left; 
    margin-bottom:8px; 
} 

input.input{ 
    width:400px; 
    padding:5px 20px; 
    margin-bottom:8px; 
    background:#F7F7F7; 
    border-width:1px; 
    border-style:solid; 
    border-color:#333333; 
} 

<div class="form"> 
    <form action="process.php" method="post"> 
     <label class="form">Name</label><input type="text" name="name" class="input" /> 
     <label class="form">Position</label><input type="text" name="position" class="input" /> 
     <label class="form">Company</label><input type="text" name="company" class="input" /> 
     <label class="form">Address</label><input type="text" name="address1" class="input" /> 
     <label class="form">Town/ City</label><input type="text" name="town" class="input" /> 
     <label class="form">Postcode</label><input type="text" name="postcode" class="input" /> 
     <label class="form">Contact No.</label><input type="text" name="phone" class="input" /> 
     <input type="submit" name ="getcatalogue" class="button" value="Request Catalogue"/> 
    </form> 
</div> 

어떤 이유로 든 라벨이 각 입력란 위에 있습니까? 도움이 될 것입니다 대단히 감사하겠습니다!

감사

Answer 1

그것을 label 요소, 클래스 form에있는이의 폭 내에서 input 요소가 오른쪽 크기에 맞지 않을 정도로 큰 폭의 합계를 만들고, 왼쪽과 오른쪽에 50 픽셀의 패딩이 있기 때문입니다 양식에 설정된 500px

여기에서 (form 및 label)와 같이 본질적으로 다른 요소에 대해 동일한 클래스 이름을 사용하면 혼동을 받기 쉽습니다. label 요소는 조상 클래스를 사용하여 적절한 컨텍스트 선택기를 사용하여 참조 할 수 있으므로 클래스가 거의 필요하지 않습니다.

더 나은 디자인은 하나의 열에 레이블이있는 테이블을 사용하고, 너비 ​​설정없이 처음에는 다른 필드를 입력 한 다음 필요에 따라 조정할 수 있습니다.