CSS实战:用dl、dd、dt做一个网页表单
文章来自:互联网 | 发表时间:2007-9-23 22:32:57
昨天做了个表单,依旧用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{#FF0000;">padding-left:14px;}
dt{#FF0000;">float:left;#FF0000;">font-weight:bold;#FF0000;">padding:12px 0 4px;}
dd{#FF0000;"> text-align:left;#FF0000;">height:auto;#FF0000;">padding:8px 0;}
input,select{#FF0000;"> vertical-align:middle;#FF0000;">color:#333333;#FF0000;"> background: #ffffff;#FF0000;"> font:12px Arial, Helvetica, sans-serif;}
textarea{#FF0000;">color:#333333;#FF0000;"> background: #ffffff;#FF0000;"> font:12px Arial, Helvetica, sans-serif;#FF0000;">line-height:150%;#FF0000;">overflow: auto}
说明:对于dl、dt、dd的设置建议不要用高度(height)和行高(line-height),在FF会产生错位,由于IE和FF是否自适应造成,建议使用dt、dd的padding属性来定位!