dl,dt,dd为什么没有缩进？

文章目录

问题描述：

今天我在写项目的时候，使用了dl,dt,dd，发现dd的缩进不见了。（提示：dd标签默认有缩进）

dl回顾：

dl就是定义一个列表
dt就是这个列表的标题
dd就是dt标题的描述内容,默认缩进

<dl>
    <dt>战狼2</dt>
        <dd>主要演员：吴京、弗兰克·格里罗等主演</dd>
        <dd>影片长度：123分钟</dd>
        <dd>制片地区：中国大陆</dd>
    <dt>赌圣</dt>
    	<dd>主要演员有周星驰、吴孟达、吴君如等</dd>
        <dd>影片长度：90分钟</dd>
        <dd>制片地区：中国香港</dd>
</dl>

运行效果：

在这里插入图片描述

提示：红色涂鸦部分就是dd默认的缩进

在这里插入图片描述

源代码：

使用下方代码，dd默认的缩进消失

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dl,dt,dd为什么没有缩进</title>
		<link rel="stylesheet" type="text/css" href="css.css"/>
	</head>
	<body>
		<div class="footer">
			<div class="w">
				<dl>
					<dt>走进XX：</dt>
					<dd>XX简介</dd>
					<dd>XX之路</dd>
					<dd>联系我们</dd>
				</dl>

				<dl>
					<dt>人才服务：</dt>
					<dd>企业联盟</dd>
					<dd>企业招聘</dd>
					<dd>优秀人才</dd>
					<dd>名企双选会</dd>
				</dl>

				<dl>
					<dt>XX公司：</dt>
					<dd>iOS开发</dd>
					<dd>Android开发</dd>
					<dd>HTML5开发</dd>
					<dd>UI设计</dd>
				</dl>

				<dl>
					<dt>关于项目：</dt>
					<dd>业务范围</dd>
					<dd>案例展示</dd>
					<dd>项目优势</dd>
					<dd>合作方式</dd>
				</dl>
				
			</div>
		</div>
	</body>
</html>

@charset "utf-8";

* {
    
    
	margin: 0;
	padding: 0;
}

/* 版心 */
.w {
    
    
	width: 1200px;
	margin: 0 auto;
}

/* 底部开始 */
.footer {
    
    
	height: 214px;
	background-color: #222222;
}

.footer dl {
    
    
	float: left;
}

.footer dl {
    
    
	padding-top: 28px;
	margin-right: 40px;
}

.footer dl dt {
    
    
	margin-bottom: 16px;
	font-size: 18px;
	color: #fff;
}

.footer dl dd {
    
    
	color: #999;
	font-size: 16px;
	line-height: 24px;
}

/* =============== 底部结束 =============== */

运行效果如下图：

在这里插入图片描述

原因分析：

解决方式

（先弄清楚dd元素的缩进，是怎样产生的。）

打开dd元素缩进显示正常的网页。
使用浏览器调试工具，选中dd元素并查看盒模型，了解dd缩进的方式。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7x0myDoN-1602352647905)(F:\data\1、笔记\前端\知识点整理\1、dl,dt,dd为什么没有缩进\2tiaoshigonju.jpg)]$

原来是给dd元素设置了margin-left：40px，所以才会缩进。

总结：（那么出现问题的网页，dd没有被缩进，说明dd的marign-left被覆盖了。）

查找方法

打开dd元素缩进出现问题的网页。
使用浏览器调试工具，选中dd元素并查看盒模型，查询dd的margin-left。

在这里插入图片描述

样式中给了通配符选择器，把所有元素的margin的值改为了0。

(总结：因为dd元素默认的缩进是通过marign-left：40px产生的，css中把所有元素的marign设为0，dd缩进就没效果了。)

浏览器参数查询：

（IE、Firefox、Chrome、Safari、Opera）

查询问题：查询主流浏览器对dd元素的缩进值（margin-left）的值是否一样。

IE

(IE5和IE7版本)

dd默认的margin-left在(IE5和IE7）盒模型上面显示为30px。（注意：30px往上面加，元素应该会向右移动，结果向左移动，有问题。）

修改盒模型中margin-left的值为35，在30的基础上加了5，dd应该会向右移动。结果下图显示，向左移动。

直到把marign-left的值加到40，才保持在默认的位置（第一次加载盒模型为margin-left为30的位置）。

(IE8及以上版本)

dd默认的margin-left在(IE8及以上版本）盒模型上面显示为40px，正常。
Firefox

dd默认的margin-left在(Firefox）盒模型上面显示为40px，正常。
Chrome

dd默认的margin-left在(Chrome）盒模型上面显示为40px，正常。
Safari

dd默认的margin-left在(Safari）盒模型上面显示为40px，正常。
Opera

dd默认的margin-left在(Opera）盒模型上面显示为40px，正常。

dl,dt,dd为什么没有缩进？

文章目录

问题描述：

dl回顾：

源代码：

原因分析：

浏览器参数查询：

IE

Firefox

Chrome

Safari

Opera

猜你喜欢