css中样式设置问题？？？？
<head>
<style type="text/css">
form {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
width:300px;
}
fieldset {
border:1px solid #ccc;
margin-bottom:10px;
}
fieldset.login input{
width:125px;
}
legend {
font-weight:bold;
font-size:1.1em;
}
label {
display:block;
width:60px;
text-align:right;
float:left;
padding-right:10px;
margin: 5px 0px;
}
input {
margin:5px 0;
}
input.text {
padding:0 0 0 3px;
width:172px;
}
input.submit {
margin: 15px 0 0 70px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Form</title>
</head>
<body>
<form action="" method="post">
<fieldset class="login">
<legend>Login Information</legend>
<label for="username" class="hover">Username</label>
<input type="text" id="username" class="required text"/>
<label for="password" class="hover">Password</label>
<input type="password" id="password" class="required text"/>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<label for="name" >Name</label>
<input type="text" id="name" class="required text"/><br>
<label for="email" >Email</label>
<input type="text" id="username" class="required email text"/><br>
<label for="date" >Date</label>
<input type="text" id="date" class="required date text"/><br>
<label for="url" >Website</label>
<input type="text" id="url" class="url text" value="http://"/><br>
<label for="phone" >Phone</label>
<input type="text" id="phone" class="phone text"/><br>
<label for="age" >Over 13?</label>
<input type="checkbox" id="age" name="age" value="yes"/><br>
<input type="submit" value="Submit Form" class="submit"/>
</fieldset>
</form>
</body>
</html>
上面是一个表单，这儿为什么fieldset.login input中设置的width 没有被input.text覆盖掉？？？
[解决办法]
帮助你修改了你的样式和 在第一个fieldset 增加两个p；目的是把label和input 放在一个块元素里，自动换行~
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<head><style type="text/css">p{margin:0;padding:0;} form { font-family:Arial, Helvetica, sans-serif;font-size:14px;width:300px; } fieldset { border:1px solid #ccc;margin-bottom:10px; } fieldset.login input{ width:125px; } legend { font-weight:bold;font-size:1.1em; } label { display:inline-block;width:60px;text-align:right;padding-right:10px;margin: 5px 0px; } input { margin:5px 0; } input.text { padding:0 0 0 3px;width:172px; } input.submit { margin: 15px 0 0 70px; }</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Simple Form</title></head><body><form action="" method="post"> <fieldset class="login"> <legend>Login Information</legend> <p><label for="username" class="hover">Username</label><input type="text" id="username" class="required text"/> </p> <p><label for="password" class="hover">Password</label><input type="password" id="password" class="required text"/> </p> </fieldset> <fieldset> <legend>Personal Information</legend> <label for="name" >Name</label><input type="text" id="name" class="required text"/><br> <label for="email" >Email</label><input type="text" id="username" class="required email text"/><br> <label for="date" >Date</label><input type="text" id="date" class="required date text"/><br> <label for="url" >Website</label><input type="text" id="url" class="url text" value="http://"/><br> <label for="phone" >Phone</label><input type="text" id="phone" class="phone text"/><br> <label for="age" >Over 13?</label><input type="checkbox" id="age" name="age" value="yes"/><br> <input type="submit" value="Submit Form" class="submit"/> </fieldset></form></body></html>