css中样式设置有关问题？
日期：2014-05-17 浏览次数：20804 次
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 放在一个块元素里，自动换行~
<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;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
