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

作者：袖梨 2022-07-02

昨天做了个表单，依旧用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属性来定位！

相关文章

精彩推荐