摘要：元素通常用来创建一个描述列表，但是在我使用的过程中发现了一个小问题。元素有两个特有的子元素，分别是和，用于在一个定义列表中声明一个术语，用来指明一个描述列表元素中一个术语的描述。
dl元素通常用来创建一个描述列表，但是在我使用的过程中发现了一个小问题。定义及用法
在MDN中 元素的定义是：一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。
元素有两个特有的子元素，分别是 和 ， 用于在一个定义列表中声明一个术语 ， 用来指明一个描述列表 (
) 元素中一个术语的描述。
这样我们就得到了一个包含术语及其描述的列表：
在上面的展示中， 元素有其默认的样式，但是我的页面上想要展示如下所示的列表：
于是，我就给 列表添加了一些CSS样式：
dl {
width: 400px;
border: 1px solid red;
box-sizing: border-box;
display: inline-block;
}
dt, dd {
margin: 0;
padding: 0;
float: left;
width: 50%;
}
问题
结果呢，就出现了文章开头时所说的小问题：
描述列表的样式完全乱了，列表的第一行好像还可以，在第二行的 之前出现了莫明其妙的空白，所后的几行也都出现了问题，这是为什么呢？
我们使用「border大法」来看一看到底为什么出现了这种情况，我为 元素中的所有元素都添加了 border ，并且稍微修改了 和 的宽度。
dl {
width: 400px;
}
dt, dd {
margin: 0;
padding: 0;
float: left;
width: 49%;
border: 1px solid red;
}
出现的结果是这样的：
想必大家都看到了，定义术语的 元素和描述术语的 元素的高度不同，因此第二行的邮箱就被挤到了 元素本来的位置上，其后的元素也被依次挤了下去。
解决造成这个问题的原因是 和 自适应高度，而纯数字的 高度要低于汉字内容的 ，因此有两种方法解决：
1 .既然纯数字的高度和带汉字的文本的高度不同，那我们在两边都加上汉字不就行了嘛：
完美～
讲道理，皮这一下很开心...
2 .正常人都不会用上边的方法的好吗，不慌，还有一种方法：给两边固定的高度。
dl {
width: 400px;
}
dt, dd {
font-size: 16px;
padding: 0;
margin: 0;
float: left;
width: 49%;
border: 1px solid red;
height: 30px;
line-height: 30px;
}
给两边都加上30px的高度，并且将行高设置为与高度相同，使文本垂直居中。
如果各位同学还有更好的解决方法，还请不吝赐教。
以上。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51712.html
摘要：站点前端开发文档原文元素原文语义化标签元素元素分类块级元素自身属性为的元素，通常使用块级元素进行布局结构的搭建。可以和，，等其他标签结合使用，表示文档结构。表示标签内容之外的，与标签内容相关的辅助信息，元素被用于无关内容。 站点：前端开发文档原文：HTML元素原文：语义化标签 HTML元素 元素分类 块级元素： div、h1-h6、hr、menu、ol、ul、li、dl、dt、d...
摘要：元素的特性全称为，中文为块级格式化上下文。应用之利用特性解决塌陷问题塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个，另一个设置，此时两个元素的就会发生重叠。 1、元素的BFC特性 BFC全称为Block Formartting Context，中文为块级格式化上下文。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相...
摘要：元素的特性全称为，中文为块级格式化上下文。应用之利用特性解决塌陷问题塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个，另一个设置，此时两个元素的就会发生重叠。 1、元素的BFC特性 BFC全称为Block Formartting Context，中文为块级格式化上下文。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相...
摘要：在我们写代码的过程中，可以养成记录一些小技巧的习惯。不到万不得已，尽量少使用或在可控范围内使用。可以在缩小浏览器窗口时等比例缩放。但此时不能加左右的，否则总宽度会超过的宽度。我们为达到目的让同一类和左右排布不同类上下排布。 在我们写CSS代码的过程中，可以养成记录一些小技巧的习惯。 1. 一般特定的元素都有自己默认的样式，但是在我们的整体布局中，可能适得其反。我们可以去掉其默认样式。 ...
阅读 3119·2021-11-22 13:54
阅读 3385·2021-11-15 11:37
阅读 3565·2021-10-14 09:43
阅读 3451·2021-09-09 11:52
阅读 3532·2019-08-30 15:53
阅读 2401·2019-08-30 13:50
阅读 2023·2019-08-30 11:07
阅读 843·2019-08-29 16:32
