1

我这里有问题。我的前两个标题没有问题。但是当我插入第三个标题时，表格就搞砸了。这是代码。是的，我很新。

![在此处输入图像描述][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;
}
4

4 回答 4

1

答案在这里：http: //jsfiddle.net/2dcPE/5/ 请检查。
铭记于心：

  1. 在 Css 中float: left;添加和h1添加h2

  2. 添加到 CSS

    br{清除：左；}

  3. 添加<br />HTML 以创建新行

更新：
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;
}
于 2012-09-27T04:44:09.233 回答
1

现场演示.................................................... .....................

嗨，现在定义你 #stylized h2的clear both

像这样

#stylized h2{
clear:both;
}

现场演示

于 2012-09-27T04:48:10.593 回答
1

发生这种情况是因为有足够的空间来保存 h2 标签中的部分文本，所以在你的 h2 css 中添加

清除：左；

于 2012-09-27T04:50:27.357 回答
1

请记住，输入元素是内联元素，因此如果有足够的空间，标题将出现在输入元素之后。标题Oral中Oral Expression的 足够宽，可以放在输入元素之后，这就是它的行为方式。

.assestment-form尝试更改from 400pxto的宽度，375px标题将出现在下一行。

于 2012-09-27T04:40:31.130 回答