Html 为什么我的css是交错的？

这是我的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>

我不明白为什么我的表格会这样出现：

---

而不是在左边整齐地排列。

第二个标签在第一个标签的拐角处，因为标签比文本框高

---

这里有两种解决方案……您可以确保标签和框的高度相同，或者在标签上添加一个

清除：左
。
这是浮动：左；您会注意到每个标签都位于前面标签的右侧。如果您需要浮动，我不确定您是否需要浮动，那么您需要使用“清除”。
将
标签
和
输入
对包装在
div
中，并消除
br
s。
您使用的特定代码不起作用。你用的是什么浏览器？这段代码有错误吗？@Khez:是为我做的（在Chrome10中）。@cHao Chrome10.0.648.205。没问题。@Khez:可能是操作系统的问题，那么（字体在Linux中呈现方式略有不同）…我不知道。但是我看到了。我设法通过将
标签
更改为
字体大小：21px来重现错误就是这样。发现行为不端的元素。
* {  
    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;  
}