標準製作網頁：用CSS的dl、dd、dt做表單

昨天做了個表單，依舊用table來布局，因為個人感覺table布局表單是不錯的（追求div重構，不等於完全拋棄table）。
今天早上起來，想想還是換種方式來做表單的布局。於是便選種了dl、dd、dt，如下：
XHTML部分：

代碼如下

複製代碼

<dl>  <dt>公司名稱：</dt>  <dd><input name="text" type="text" value="廣州駿寶實業有限公司" size="50" /> <span class="red">*</span></dd>  <dt>公司工業類別：</dt>  <dd><select name="select"><option>電腦和消費電子 </option></select>  <select name="select"><option>空氣調節器</option></select> <span class="red">*</span></dd>  <dt>公司介紹：</dt>  <dd><textarea name="textarea" cols="100" rows="9">　　廣州駿寶實業有限公司創始於1990年，是集科研、製造、銷售、服務於一體，擁有研究開發中心、模具設計製造中心、電子和電路控制設計製造中心、注塑加工和產品整機生產基地的規模化經濟實體。駿寶公司生產基地約佔地 30000平方米，擁有精良的裝置，強大的生產能力。公司按照現代化企業的規範組織和管理，堅持誠信、創新、勤奮、進取的企業精神，不斷髮展壯大。 　　駿寶公司人才薈萃，現有職工326人，擁有研發 ... </textarea> <span class="red">*</span>  </dd> </dl>

CSS部分：

代碼如下	複製代碼
dl{padding-left:14px;} dt{float:left;font-weight:bold;padding:12px 0 4px;} dd{ text-align:left;height:auto;padding:8px 0;} input,select{ vertical-align:middle;color:#333333; background: #ffffff; font:12px Arial, Helvetica, sans-serif;} textarea{color:#333333; background: #ffffff; font:12px Arial, Helvetica, sans-serif;line-height:150%;overflow: auto}

說明：對於dl、dt、dd的設定建議不要用高度（height）和行高（line-height），在FF會產生錯位，由於IE和FF是否自適應造成，建議使用dt、dd的padding屬性來定位！