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

IT利刃出鞘

已于 2022-12-29 22:42:42 修改

阅读量1.6w

点赞数 33

分类专栏： CSS 文章标签： css

于 2021-12-05 11:35:22 首次发布

本文链接：https://blog.csdn.net/feiying0canglang/article/details/121724575

版权

CSS 专栏收录该内容

42 篇文章 7 订阅

订阅专栏

原文网址：CSS之排列系列--dl, dt, dd--使用/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

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

结果

IT利刃出鞘

关注

33
点赞
踩
79

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS之排列系列--dl, dt, dd--使用/教程/实例

本文用示例介绍CSS中的dl, dt, dd的用法。 dl, dt, dd是组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。为常用标题+列表型标签。若没有对dl dt dd标签初始CSS样式，默认dd列表内容会缩进。
复制链接

扫一扫