为什么我的css交错？

这里是我的html：为什么我的css交错？

<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

相反的内衬很好地在左边。

来源

2011-04-15 ian

您使用的具体代码不会[那]（http://jsfiddle.net/Khez/x5ZSN/）。你使用的是什么浏览器？这个确切的代码是否给出错误？ – Khez 2011-04-15 00:27:20

@Khez：对我来说（在Chrome 10中）。 – cHao 2011-04-15 00:30:41

@cHao Chrome 10.0.648.205这里。没有任何问题。 – Khez 2011-04-15 00:31:09

由于标签比文本框高，因此您的第二个标签正赶上您的第一个标签。

这里有两种解决方案...您可以确保标签和盒子的高度相同，或者将clear: left添加到您的标签中。

来源

2011-04-15 00:27:41 cHao

这是浮动的：左边;你会注意到每个标签都在前面的标签的右边。如果你需要漂浮物 - 我不确定你是否需要 - 那么你需要使用“清除”。

来源

2011-04-15 00:28:01

将你的每个label和input对包装在div中，并消除br s。

来源

2011-04-15 00:28:12

为什么我的css交错？

回答

相关问题