定义列表dl中标签 dt 与标签dd对齐方法，标签ul与标签li对齐

最新推荐文章于 2022-09-06 18:32:40 发布

战南城

最新推荐文章于 2022-09-06 18:32:40 发布

阅读量2.4k

点赞数

分类专栏：个人笔记，不喜勿喷！！

本文链接：https://blog.csdn.net/qq_29948297/article/details/108354802

版权

个人笔记，不喜勿喷！！专栏收录该内容

329 篇文章 2 订阅

订阅专栏

不定义css样式时（默认情况）：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <dl>
            <dt>hello</dt>
            <dd>xiaohao</dd>
        </dl>
    </body>
</html>

运行结果如下：

方法一：

1.设置全局样式

margin:0;

}

方法二：

2.给dd设置样式

dd{

margin:0;

}

设置css样式后：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>


        <style>
            dd{
                margin: 0px;
            }
        </style>


    </head>
    <body>
        <dl>
            <dt>hello</dt>
            <dd>xiaohao</dd>
        </dl>
    </body>
</html>

运行结果为：

ul与li对齐方法类似，ul存在内边距，设置ul的内边距为0，即可实现ul与li对齐。

注：

设置dt{float:left;}可以让dd，dt在同一行显示；

战南城

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
定义列表dl中标签 dt 与标签dd对齐方法，标签ul与标签li对齐

不定义css样式时（默认情况）：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> &...
复制链接

扫一扫