HTML中dl元素的高度问题

您所在的位置:网站首页 html中dl和dt HTML中dl元素的高度问题

HTML中dl元素的高度问题

2023-10-13 05:53| 来源: 网络整理| 查看: 265

dl元素通常用来创建一个描述列表,但是在我使用的过程中发现了一个小问题。 定义及用法

在MDN中 元素的定义是:一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键-值对列表)。 元素有两个特有的子元素,分别是 和 , 用于在一个定义列表中声明一个术语 , 用来指明一个描述列表 ( ) 元素中一个术语的描述。

Name Godzilla Born 1952 Birthplace Japan Color Green

这样我们就得到了一个包含术语及其描述的列表:dl元素列表

给元素添加样式

在上面的展示中, 元素有其默认的样式,但是我的页面上想要展示如下所示的列表:目标列表

于是,我就给 列表添加了一些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的高度,并且将行高设置为与高度相同,使文本垂直居中。结果图

解决~

如果各位同学还有更好的解决方法,还请不吝赐教。以上。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3