CSS之排列系列--dl, dt, dd--使用/教程/实例
时间：02-15来源：作者：点击数：
简介
本文用示例介绍CSS中的dl, dt, dd的用法。
dl, dt, dd简介
说明
dl, dt, dd是组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。
<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。若没有对dl dt dd标签初始CSS样式，默认dd列表内容会缩进。
dl, dt, dd含义
- dl：定义列表（Definition List）
- dt：定义术语（Definition Term）
- dd：定义描述（Definition Description）
示例1：默认格式
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<div class="container">
<dl>
<dt>标题1</dt>
<dd>列表1</dd>
</dl>
<dl>
<dt>标题1</dt>
<dd>列表1</dd>
<dt>标题2</dt>
<dd>列表1</dd>
<dd>列表2</dd>
</dl>
</div>
<script>
</script>
</body>
</html>
结果
可以发现，dd标签会跟dt标签的内容的最后对齐。
示例2：dd与dt左对齐
说明
将dd的margin设为0即可
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
dd {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<dl>
<dt>标题1</dt>
<dd>列表1</dd>
</dl>
<dl>
<dt>标题1</dt>
<dd>列表1</dd>
<dt>标题2</dt>
<dd>列表1</dd>
<dd>列表2</dd>
</dl>
</div>
<script>
</script>
</body>
</html>
结果
示例3：dd与dt居中 + 并排
说明
居中的方法：dl的text-align设置为center；
并排的方法：dl的父元素设置为display: flex
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
.container {
display: flex;
}
dl {
margin: 10px;
text-align: center;
border: #1e17ff solid 2px;
}
dd {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<dl>
<dt>这是标题1</dt>
<dd>列表1</dd>
</dl>
<dl>
<dt>标题1</dt>
<dd>这是列表1</dd>
<dt>标题2</dt>
<dd>这是列表1</dd>
<dd>这是列表2</dd>
</dl>
</div>
<script>
</script>
</body>
</html>
结果
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:CSS基础与应用详解
下一篇:使用 CSS3 自定义网页字体的方法
湘公网安备 43102202000103号