我在这里遇到问题。我的前两个标题没有问题。但是当我插入我的第3个标题时，表格被搞砸了。这是代码。是的，我很新。
！[在此处输入图片说明] [1]
<html>
<head>
<link rel="stylesheet" href="form.css" type="text/css">
</head>
<body>
<div id="stylized" class="assestment-form">
<form id="form" name="form" method="post" action="assesment-form-handler.php">
<h1>Application Information</h1>
<p> </p>
<label>Name</label>
<input type="text" name="client_name" id="client_name" />
<label>Date of Birth</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Gender</label>
<input type="text" name="client_gender" id="client_gender" />
<label>Address</label>
<textarea name="client_address" rows=5 cols=40 id="client_address"></textarea>
<label>Contact No.</label>
<input type="text" name="client_contact" id="client_contact" />
<label>Email Address</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Marital Status</label>
<input type="text" name="client_status" id="client_status" />
<label>Citizenship</label>
<input type="text" name="client_citizen" id="client_citizen" />
<h1>Formal Training</h1>
<p> </p>
<label>DIPLOMA 1 </label>
<input type="text" name="client_dip1" id="client_dip1" />
<label>Field of Training </label>
<input type="text" name="client_field1" id="client_field1" />
<label>Educational Institution</label>
<input type="text" name="client_edu1" id="client_edu1" />
<label>Began Studies on</label>
<input type="text" name="client_stud1" id="client_stud1" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip1" id="client_obtaindip1" />
<label>DIPLOMA 2 </label>
<input type="text" name="client_dip2" id="client_dip2" />
<label>Field of Training </label>
<input type="text" name="client_field2" id="client_field2" />
<label>Educational Institution</label>
<input type="text" name="client_edu2" id="client_edu2" />
<label>Began Studies on</label>
<input type="text" name="client_stud2" id="client_stud2" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip2" id="client_obtaindip2" />
<label>DIPLOMA 3 </label>
<input type="text" name="client_dip3" id="client_dip3" />
<label>Field of Training </label>
<input type="text" name="client_field3" id="client_field3" />
<label>Educational Institution</label>
<input type="text" name="client_edu3" id="client_edu3" />
<label>Began Studies on</label>
<input type="text" name="client_stud3" id="client_stud3" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip3" id="client_obtaindip3" />
<h1>Work Experience</h1>
<p> </p>
<label>JOB 1</label>
<input type="text" name="client_job1" id="client_job1" />
<label>Company</label>
<input type="text" name="client_company1" id="client_company1" />
<label>Date of Beginning</label>
<input type="text" name="client_begin1" id="client_begin1" />
<label>Date of End</label>
<input type="text" name="client_end1" id="client_end1" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties1" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob1">
<label>JOB 2</label>
<input type="text" name="client_job2" id="client_job2" />
<label>Company</label>
<input type="text" name="client_company2" id="client_company2" />
<label>Date of Beginning</label>
<input type="text" name="client_begin2" id="client_begin2" />
<label>Date of End</label>
<input type="text" name="client_end2" id="client_end2" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob2">
<label>JOB 3</label>
<input type="text" name="client_job3" id="client_job3" />
<label>Company</label>
<input type="text" name="client_company3" id="client_company3" />
<label>Date of Beginning</label>
<input type="text" name="client_begin3" id="client_begin3" />
<label>Date of End</label>
<input type="text" name="client_end3" id="client_end3" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob3">
<h1>Language Skills</h1>
<p>(Please specify level: beginner, intermediate or advance) </p>
<h2>Reading</h2>
<label>French</label>
<input type="text" name="client_readfrench1" id="client_readfrench1" />
<label>English</label>
<input type="text" name="client_readenglish1" id="client_readenglish1" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest1" id="client_langtest1"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify1" id="client_specify1" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed1" id="client_datepassed1" />
<h2>Writing</h2>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<label>English</label>
<input type="text" name="client_readenglish2" id="client_readenglish2" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest2" id="client_langtest2"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify2" id="client_specify2" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed2" id="client_datepassed2" />
<h2>Oral Expression</h2>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<button type="submit">Submit</button>
<div class="spacer"></div>
</form>
</div>
<body>
</html>
css代码
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.assestment-form{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:20px;
font-weight:bold;
margin-bottom:8px;
}
#stylized h2 {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:left;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#stylized textarea {
loat:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
答案 0 :(得分：1)
请记住输入元素是内联元素，因此如果有足够的空间，标题将出现在输入元素之后。标题Oral中的Oral Expression宽度足以适合输入元素，这就是它的行为方式。
尝试将.assestment-form的宽度从400px更改为375px，标题将显示在下一行。
答案 1 :(得分：1)
答案在这里：http://jsfiddle.net/2dcPE/5/
请检查。
请记住：
float: left;和h1添加h2
添加到Css
BR { 清楚：左; }
在HTML中添加<br />以制作新行
<强>更新
HTML
<html>
<head>
<link rel="stylesheet" href="form.css" type="text/css">
</head>
<body>
<div id="stylized" class="assestment-form">
<form id="form" name="form" method="post" action="assesment-form-handler.php">
<h1>Application Information</h1><br/>
<p> </p>
<label>Name</label>
<input type="text" name="client_name" id="client_name" />
<label>Date of Birth</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Gender</label>
<input type="text" name="client_gender" id="client_gender" />
<label>Address</label>
<textarea name="client_address" rows=5 cols=40 id="client_address"></textarea>
<label>Contact No.</label>
<input type="text" name="client_contact" id="client_contact" />
<label>Email Address</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Marital Status</label>
<input type="text" name="client_status" id="client_status" />
<label>Citizenship</label>
<input type="text" name="client_citizen" id="client_citizen" />
<h1>Formal Training</h1><br/>
<p> </p>
<label>DIPLOMA 1 </label>
<input type="text" name="client_dip1" id="client_dip1" />
<label>Field of Training </label>
<input type="text" name="client_field1" id="client_field1" />
<label>Educational Institution</label>
<input type="text" name="client_edu1" id="client_edu1" />
<label>Began Studies on</label>
<input type="text" name="client_stud1" id="client_stud1" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip1" id="client_obtaindip1" />
<label>DIPLOMA 2 </label>
<input type="text" name="client_dip2" id="client_dip2" />
<label>Field of Training </label>
<input type="text" name="client_field2" id="client_field2" />
<label>Educational Institution</label>
<input type="text" name="client_edu2" id="client_edu2" />
<label>Began Studies on</label>
<input type="text" name="client_stud2" id="client_stud2" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip2" id="client_obtaindip2" />
<label>DIPLOMA 3 </label>
<input type="text" name="client_dip3" id="client_dip3" />
<label>Field of Training </label>
<input type="text" name="client_field3" id="client_field3" />
<label>Educational Institution</label>
<input type="text" name="client_edu3" id="client_edu3" />
<label>Began Studies on</label>
<input type="text" name="client_stud3" id="client_stud3" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip3" id="client_obtaindip3" />
<h1>Work Experience</h1><br/>
<p> </p>
<label>JOB 1</label>
<input type="text" name="client_job1" id="client_job1" />
<label>Company</label>
<input type="text" name="client_company1" id="client_company1" />
<label>Date of Beginning</label>
<input type="text" name="client_begin1" id="client_begin1" />
<label>Date of End</label>
<input type="text" name="client_end1" id="client_end1" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties1" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob1">
<label>JOB 2</label>
<input type="text" name="client_job2" id="client_job2" />
<label>Company</label>
<input type="text" name="client_company2" id="client_company2" />
<label>Date of Beginning</label>
<input type="text" name="client_begin2" id="client_begin2" />
<label>Date of End</label>
<input type="text" name="client_end2" id="client_end2" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob2">
<label>JOB 3</label>
<input type="text" name="client_job3" id="client_job3" />
<label>Company</label>
<input type="text" name="client_company3" id="client_company3" />
<label>Date of Beginning</label>
<input type="text" name="client_begin3" id="client_begin3" />
<label>Date of End</label>
<input type="text" name="client_end3" id="client_end3" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob3">
<h1>Language Skills</h1><br/>
<p>(Please specify level: beginner, intermediate or advance) </p>
<h2>Reading</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench1" id="client_readfrench1" />
<label>English</label>
<input type="text" name="client_readenglish1" id="client_readenglish1" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest1" id="client_langtest1"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify1" id="client_specify1" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed1" id="client_datepassed1" />
<h2>Writing</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<label>English</label>
<input type="text" name="client_readenglish2" id="client_readenglish2" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest2" id="client_langtest2"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify2" id="client_specify2" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed2" id="client_datepassed2" />
<div>
<h2>Oral Expression</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<button type="submit">Submit</button>
<div class="spacer"></div>
</form>
</div>
<body>
</html>
CSS
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.assestment-form{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:20px;
font-weight:bold;
margin-bottom:8px;
float: left;
}
#stylized h2 {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
margin-bottom:8px;
float: left;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:left;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#stylized textarea {
loat:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
br{
clear: left;
}
答案 2 :(得分：1)
的 Live demo ............................ ........................................
您好现在将#stylized h2定义为clear both
就像这样
#stylized h2{
clear:both;
}
的 Live demo 的
答案 3 :(得分：1)
这种情况正在发生，因为有足够的空间来容纳h2标签中的部分文本 所以在你的h2 css中添加
明确：左;