왜 내 CSS가 비틀 거리는가?

Question

여기

내 HTML입니다 :

<div id="header"> 
<p id="logout"><a href="register.php">register</a></p> 

<h1>header.</h1> 
</div> 

<div id="main">  
<p>login.</p> 

<form method="post" action="index.php" name="loginform" id="loginform"> 
    <fieldset> 
     <label for="username">u:</label><input type="text" name="username" id="username" /> 
     <br> 
     <label for="password">p:</label><input type="password" name="password" id="password" /> 
     <br> 
     <input type="submit" name="login" id="login" value="Login" /> 
    </fieldset> 
</form> 
</div> 

그리고 여기 내 CSS입니다 :

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    /*font-family: Trebuchet MS;*/ 
    font-family: Helvetica; 
} 
a { 
    color: #000; 
} 
a:hover, a:active, a:visited { 
    text-decoration: none; 
} 

#logout { font-size: 12px;} 

#header { 
    width: 700px; 
    margin: 0 auto; 
    margin-top: 0px; 
    font-size: 25px; 
    padding: 10px; 

    border-bottom: 1px solid #CCC; 
    border-right: 1px solid #CCC; 
    border-left: 1px solid #CCC; 

    background-color: #EEE; 
} 

#slogan { font-size:20px;} 

#main { 
    width: 700px; 
    margin: 0 auto; 
    margin-top: 20px; 
    padding: 10px; 
    border: 1px solid #CCC; 
    background-color: #EEE; 
} 

#contact { 
    width: 700px; 
    margin: 0 auto; 
    margin-top: 20px; 
    padding: 10px; 
    border: 1px solid #CCC; 
    background-color: #EEE; 
} 

p { font-size: 20px; } 

form fieldset { border: 0; } 

form fieldset p br { clear: left; } 

label { 
    margin-top: 5px; 
    font-size: 20px; 
    display: block; 
    width: 30px; 
    padding: 0; 
    float: left; 
} 
input { 
    font-family: Trebuchet MS; 
    border: 1px solid #CCC; 
    margin-bottom: 5px; 
    background-color: #FFF; 
    padding: 2px; 
} 
input:hover { 
    border: 1px solid #222; 
    background-color: #EEE; 
} 

내 양식이 같이 나오는 이유를 알아낼 수 없습니다 : http://cl.ly/2c1b0w3h3S142Q2s3A3I

대신에 줄 지어을 왼쪽에 멋지게.

Answer 1

레이블이 텍스트 상자보다 높기 때문에 두 번째 레이블이 첫 번째 모서리에오고 있습니다.

두 가지 해결책은 ... 라벨과 상자가 동일한 높이인지 확인하거나 라벨에 clear: left을 추가 할 수 있습니다.

Answer 2

그건 float : lefts; 각 레이블은 이전 레이블의 오른쪽에 있음을 알 수 있습니다. 수레가 필요하다면 - 당신이 할 수 있을지 모르겠다 - 그렇다면 "맑은 소리"를 사용해야합니다.

Answer 3

각각 label 및 input 쌍을 div에 넣고 br을 제거하십시오.