您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS之排列系列--dl, dt, dd--使用/教程/实例

时间：02-15来源：作者：点击数：20

简介

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