标准制作网页：用CSS的dl、dd、dt做表单

时间：2022-07-02 12:55:31 编辑：袖梨来源：一聚教程网

昨天做了个表单，依旧用table来布局，因为个人感觉table布局表单是不错的（追求div重构，不等于完全抛弃table）。
今天早上起来，想想还是换种方式来做表单的布局。于是便选种了dl、dd、dt，如下：
XHTML部分：

代码如下

复制代码

公司名称：: *
公司工业类别：: *
公司介绍：: 　　广州骏宝实业有限公司创始于1990年，是集科研、制造、销售、服务于一体，拥有研究开发中心、模具设计制造中心、电子和电路控制设计制造中心、注塑加工和产品整机生产基地的规模化经济实体。骏宝公司生产基地约占地 30000平方米，拥有精良的设备，强大的生产能力。公司按照现代化企业的规范组织和管理，坚持诚信、创新、勤奋、进取的企业精神，不断发展壮大。<br /> 　　骏宝公司人才荟萃，现有职工326人，拥有研发 ... *

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属性来定位！