[翻译]标记语言和样式手册 chapter 5 表单（3）

定义样式

最简单的样式修改,大概是去掉表单内<dd>元素的预设缩进:

form dd{
    margin:0;
}

前面这一小段css会使方法D范例显示成图5-7:

图5-7. 去掉<dd>缩进效果的定义清单式表单排版

方法A的表格效果,也能借着浮动表单内的<dt>元素达成:

form dd {
  margin: 0;
  }
form dt {
  float: left;
  padding-right: 10px;
  }

在把<dt>元素浮动到左边之后,包含在<dd>之内的表单元素就会排列到右侧,像是图5-8这样.你应该已经发现表单元素不会完美的对齐,但这至少说明了使用<dl>标签排版表单时,并不代表必须将每个元素都单独显示在一行里.

图5-8.浮动<dt>元件之后的表单排版

事实上,由于多了<dl><dt>和<dd>元素,再加上表单内原本就具备的<label>与<input>元素,因此在设计CSS时,你拥有更多可以指定样式的对象,而发挥的空间也变大了.