规范制造网页：用CSS的dl、dd、dt做表单
日期：2013-09-09 浏览次数：21538 次
昨天做了个表单，照旧用table来规划，由于团体感觉table规划表单是不错的（追求div重构，不等于完全抛弃table）。
今天早上起来，想想还是换种方式来做表单的规划。于是便选种了dl、dd、dt，如下：
XHTML部分：
CSS部分：
说明：对于dl、dt、dd的设置建议不要用高度（height）和行高（line-height），在FF会产生错位，由于IE和FF能否自顺应形成，建议使用dt、dd的padding属性来定位！
今天早上起来，想想还是换种方式来做表单的规划。于是便选种了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>
<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}
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属性来定位！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
