在我的表单中应用样式后，表单的某些元素特别不符合样式：
第1期：350px的宽度仅适用于五个输入元素之一，即电子邮件字段。
第2期：我正在使用输入元素上的图像来表示它们是必需的但是图像在使用时没有出现在任何输入元素上。
第3期：我希望使用类social_sign_in的div有一个我应用但不起作用的保证金顶部。
第4期：我正在尝试使用表单样式，即我称之为form_input_div的类，将自身包裹在宽度为350px的表单元素中，同时保留在中心。这似乎没有用。
由于我对CSS略显陌生，我怀疑我可能在样式基础知识方面犯了一些错误，所以如果是这样的话我会道歉。
编辑：这是相关的HTML代码：
<div class="page_content_main_div">
<div class="page_content_heading_div" >
<p> Log in with: </p>
</div>
<div class="social_sign_in_div">
<a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
</div>
<div class="social_sign_in_div">
<a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
</div>
<div class="btn_log_in_with_email_div">
<a class="btn-auth btn_log_in_with_email large" href="#">Log in with <b>ABCD details</b></a>
</div>
<hr class="hr"></hr>
<form action="#" method="GET" class="sign_up_form">
<div class="page_content_heading_div">
<p>Sign up:</p>
</div>
<div>
<input title="Enter first name" class="firstname" name="firstname" type="text" required placeholder="Enter first name">
</div>
<div>
<input title="Enter second name" class="secondname" name="secondname" type="text" required placeholder="Enter second name">
</div>
<div>
<input title="Enter your e-mail" class="email" name="email" type="email" required placeholder="Enter email">
</div>
<div>
<input title="Enter a password" class="password" name="password" type="password" required placeholder="Enter password">
</div>
<div>
<input title="Re-enter password" class="reenterpassword" name="reenterpassword" type="password" required placeholder="Re-enter password">
</div>
<div class="form_button_internal_div">
<button title="Type your second name" type="submit" class="btn_sign_up">Sign Up</button>
</div>
<div class="form_terms_of_service_internal_div">
<p class="terms_of_service">By signing up, I agree to the ABCD <a href='#' id="generic_link_decoration"><b>Terms of Service</b></a> and <a href='#' id="generic_link_decoration"><b>Privacy Policy</b></a>.</p>
</div>
</form>
</div>
编辑：这是相关的CSS代码：
/* Page content heading div */
.page_content_heading_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
color: #999999;
font-size: 40px;
font-weight: bold;
clear: both;
}
/* Page content main div */
.page_content_main_div {
clear: both;
}
/* Social sign in div */
.social_sign_in_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin-top: 10px;
}
/* Log in with email div */
.btn_log_in_with_email_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin-top: 10px;
}
/* hr styling */
.hr {
width: 350px;
height: 2px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
/* */
.sign_up_form {
width: 350px;
display: inline-block;
}
/* */
input[type="text"], input[type="password"], input[type="email"] {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
width: 100%;
height: 45px;
font-size: 20px;
color: #000000;
border: 1px solid #999999;
border-radius: 6px;
padding: 5px 5px 5px 5px;
margin-top: 10px;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
/* */
input:focus {
outline: solid #999999;
border-radius: 6px;
}
/* */
.form_button_internal_div {
margin-top: 10px;
margin-bottom: 10px;
}
/* Primary button */
.btn_sign_up {
right: 0px;
width: 150px;
height: 36px;
border:none;
font-weight: normal;
font-size: 20px;
margin-top: 10px;
background: #CCC;
background: -webkit-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -moz-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -ms-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -o-linear-gradient(#A2E55A 0%,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
-pie-background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
color: #F5F5F5;
}
/* */
.btn_sign_up:hover {
background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
-pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}
/* */
.btn_sign_up:active {
background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
-pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}
/* */
.form_terms_of_service_internal_div {
margin-top: 10px;
margin-bottom: 10px;
}
/* */
.terms_of_service {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
font-size: 15px;
color: #999999;
}
答案 0 :(得分：0)
350px的宽度仅适用于五个输入元素之一，即电子邮件字段。
这似乎不是真的......我看到所有输入的长度相同。
我在接合时在输入元素上应用图像以指示它们是必需的但是图像在接合时没有出现在任何输入元素上。
您的参与输入由类required标识，但默认情况下它们都具有此类，因此确实没有触发器。您要找的是:focus，然后应用样式。
我希望使用类social_sign_in的div有一个我应用但尚未使用的保证金顶部。
它正在运作，但10px还不足以看出差异。如果你把它变成50px，你就会看到它移动了。
我尝试使用表单样式，即我调用form_input_div的类将自身包裹在350px宽的表单元素中，同时保留在中心。这似乎没有用。
form_input_div serve的目的是什么？为什么不从输入中删除宽度，让它们占用容器的100％，这是表单，并使用一些填充在表单上设置宽度，你就可以得到你想要的东西。
此外，required id不是放置输入标签的有效属性。