首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

css中样式设置有关问题?

2012-09-22 
css中样式设置问题????headstyle typetext/cssform {font-family:Arial, Helvetica, sans-serif f

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> 

热点排行