1. 首頁
  2. 問答
  3. 表格標題

表格標題

2012-09-27 66 views
0

我在這裏遇到問題。我的前兩個標題沒有問題。但是當我插入我的第三個標題時，表格被擰緊了。這是代碼。是的，我很新。表格標題

！[在這裏輸入的形象描述] [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; 
}

來源

2012-09-27 Ey Jay

+0

請使用jsFiddle而不是上傳zip文件。 – Dai

回答

1

記住輸入元素是內聯元素，所以，如果有足夠的標題將輸入元素之後出現空間讓它這樣做。標題Oral Expression中的Oral足夠寬以適應輸入元素，這就是爲什麼它的行爲如此。

嘗試將.assestment-form的寬度從400px更改爲375px，標題將顯示在下一行中。

來源

2012-09-27 04:40:31 neo108

1

答案在這裏：http://jsfiddle.net/2dcPE/5/ 請檢查。
請記住：

  1. 在CSS中

  2. 添加的CSS

    爲h1和h2添加float: left;

    BR { 明確：左; }

  3. 添加<br />在HTML做出新線

UPDATE：
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-27 04:44:09

1

Live demo ..................................... ...............................

嗨現在定義#stylized h2到clear both

因爲這樣

#stylized h2{ 
clear:both; 
}

Live demo

來源

2012-09-27 04:48:10

1

這是發生，因爲有足夠的空間，從H2標籤 容納文本的一部分，所以在你的CSS H2添加

明確：左;

來源

2012-09-27 04:50:27 sonnyhe2002

相關問題

 相關問題