一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2008-01-26 编辑:简简单单 来源:一聚教程网

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

 代码如下 复制代码

 
公司名称:

 
*

 
公司工业类别:

 

  *

 
公司介绍:

 
*
 


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

热门栏目