也就是说<dt>用来创建列表中的上层项目，<dd>用来创建列表中最下层项目，<dt>和<dd>都必须放在<dl></dl>标志对之间。
<dl>
<dt>我们在做列表标题</dt>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
</dl>
HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
1、无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul>标签。每个列表项始于 <li>。
2、有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol>标签。每个列表项始于 <li>标签。
3、定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl>标签开始。每个自定义列表项以 <dt>开始。每个自定义列表项的定义以 <dd>开始。
4、不同类型的有序列表
本例演示不同类型的有序列表。
5、这就是我们常用到的HTML列表标签
以上所有的列表项内部可以使用段落、换行符、图片、链接以及其他列表等
方法之一如下：
图片及图片说明.html 文件代码如下：
<!doctype html><html lang="zh">
<head>
<meta charset="utf-8">
<title>图片及图片说明</title>
<link href="20130920img.css" rel="stylesheet">
</head>
<body>
<dl>
<li><p class="marginright"><img class="img" src="1.jpg" alt="这是一张关于X1的图片">图片一</p></li>
<li><p class="marginright"><img class="img" src="2.jpg" alt="这是一张关于X2的图片">图片二</p></li>
<li><p class="marginright"><img class="img" src="3.jpg" alt="这是一张关于X3的图片">图片三</p></li>
<li><p><img class="img" src="4.jpg" alt="这是一张关于X4的图片">图片四</p></li>
<li><p class="marginright"><img class="img" src="5.jpg" alt="这是一张关于X5的图片">图片五</p></li>
<li><p class="marginright"><img class="img" src="6.jpg" alt="这是一张关于X6的图片">图片六</p></li>
<li><p class="marginright"><img class="img" src="7.jpg" alt="这是一张关于X7的图片">图片七</p></li>
<li><p><img class="img" src="8.jpg" alt="这是一张关于X8的图片">图片八</p></li>
</dl>
</body>
</html>
img.css 文件代码如下：
body {background: #fff
margin: 0 auto
}
dl {
margin: 0 24px
padding: 10px
width: 920px /* 这是关键行，控制列表总宽度 */
}
dl li {
list-style-type: none /* 去掉列表前的点 */
display: inline /* 这是关键行，使列表变成内联 */
float: left /* 这是关键行，使内联的列表元素全部左浮动 */
}
dl li p .img {
width: 200px /* 这是关键行，控制图片宽度 */
height: 200px
display: block /* 这是关键行，把内联图片变成块级盒模型 */
margin-bottom: 5px /* 为块级盒模型图片添加5px下外边距 */
}
dl li p {
text-align: center /* 这是关键行，控制文字居中 */
}
dl li p.marginright {
margin-right: 40px /* 这是关键行，控制1 2 3 5 6 7图片右外边距宽度 */
text-align: center
}
你的问题困难在于HTML中为 <dl/>列表 中的 <li/>添加合适的标签<p/>把<li/>中的<img/>和文字包裹起来。这样HTML就足够结构化。
CSS中，主要解决三个问题。
1. 控制好<dl/>列表的总宽度，及各幅图片的宽度，图片1 2 3 5 6 7的右外边距，就会自动换行。
1.1<dl/>左右外边距24px ，边框默认为0 ， 内边距10px，宽920px，总宽988px；
1.2图片1 2 3 4每幅图片宽200px(高200px), 包含图片1 2 3的<p/>每个外右边距是40px，第一 行总宽920px，<dl/>的总宽920px，所以到这里放不下图片，会自动换行。
1.3图片5 6 7 8每幅图片宽200px(高200px), 包含图片5 6 7的<p/>每个外右边距是40px，第二 行总宽920px，<dl/>的总宽920px，这是第二行。
2. 用 display:inline使<dl/><li/>变成内联显示，再加上 float:left所有的<li/>就浮动起来成为一行，但是因为以上1，我们控制了宽度，使得内联的<li/>到了固定宽度就换行。
3. 再用display:block把包含“<img/>文字”的<p/>变成块级盒模型，那么文字就会显示在图片的下方，再给<p/>加上 text-align:center文字就居中了。
