简介

        本文用示例介绍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>

结果

CSS--dl, dt, dd--使用/教程/实例_css样式

可以发现，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>

结果

CSS--dl, dt, dd--使用/教程/实例_css_02

示例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--dl, dt, dd--使用/教程/实例_css_03