设置dt的float属性使dt和dd在同一行内

来源：互联网发布：黑暗之魂3捏脸数据编辑：程序博客网时间：2024/06/05 02:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">dt {float: left;}</style></head><body><dl>  <dt>类别：</dt>  <dd>精品</dd>  <dt>标签：</dt>  <dd>鲜花</dd></dl></body></html>

没有设置dt的float属性的运行效果为：

设置dt的float属性后，运行的结果为

但是这个效果和以下这个效果还是有区别的

区别在哪里呢？

1、图一行与行之间没有间距，而图二每一行之间有间距。这是因为图二中，每一个dl只装一个dt和dd，即一个定义列表只有一个列表项。再设置定义列表dl的margin，就可以实现每一行之间的间距。

一个定义列表只有一个列表项，这是编写类似效果的行规。

2、在dl里设置字体大小font-size。在dd里设置margin-left

图二的代码是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> .attribute {  margin-bottom: 15px;  padding-bottom: 15px;  border-bottom: 1px solid #d9d9d9;} .attribute dl {  font-size: 12px;  margin: 12px 0;}.attribute dl:before, .attribute dl:after {  content: " ";  display: table;} .attribute dl:after {  clear: both;} .attribute dl > dt {  font-weight: normal;  float: left !important;} .attribute dl > dd {  margin-left: 70px;} .attribute dl > dd .serial-num {  margin-left: 40px;}</style></head><body><div class="attribute"><dl><dt>类 别：</dt><dd>鲜花-精品鲜花 编 号：9010940</dd></dl><dl><dt>材 料：</dt><dd>粉色康乃馨19枝，紫色洋桔梗、红铁叶少许至花束饱满。</dd></dl><dl><dt>包 装：</dt><dd>墨绿色条纹纸、常春藤粉色压纹纸，酒红色缎带束扎</dd></dl><dl><dt>花 语：</dt><dd>“红颜弹指老，刹那芳华。”妈妈在最美好的年华里，伴着我们长大。岁月改变了妈妈的容颜，但改变不了我们对妈妈无尽的爱。</dd></dl>  <dl><dt>附 送：</dt><dd>免费附送精美贺卡，代写您的祝福。(您下单时可填写留言栏)</dd> </dl><dl><dt>配 送：</dt><dd>“精品鲜花”限送35个城市的市区及近郊：北京、上海、广州、深圳、天津、重庆、大连、青岛、苏州、厦门，及其他省会城市（西宁、拉萨除外）</dd></dl><dl>  <dt>说明：</dt><dd><span style="color:#FF6600;">特价优惠</span></dd></dl><dl id="tips"><dt>小贴士：</dt><dd>5月6日-9日配送,请选择右边的母亲节预订价 ↓↓↓</dd><dt> </dt></dl></div></body></html>

以下这段代码是没看懂的，消除了运行效果也没有影响

.attribute dl:before,   .attribute dl:after {    content: " ";    display: table;  }   .attribute dl:after {    clear: both;  }

0 0