dl元素通常用来创建一个描述列表,但是在我使用的过程中发现了一个小问题。
定义及用法
在MDN中 <dl>
元素的定义是:一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键-值对列表)。<dl>
元素有两个特有的子元素,分别是 <dt>
和 <dd>
, <dt>
用于在一个定义列表中声明一个术语 , <dd>
用来指明一个描述列表 ( <dl>
) 元素中一个术语的描述。
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
这样我们就得到了一个包含术语及其描述的列表:
给<dl>元素添加样式
在上面的展示中, <dl>
元素有其默认的样式,但是我的页面上想要展示如下所示的列表:
于是,我就给 <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%;
}
问题
结果呢,就出现了文章开头时所说的小问题:
描述列表的样式完全乱了,列表的第一行好像还可以,在第二行的 <dt>
之前出现了莫明其妙的空白,所后的几行也都出现了问题,这是为什么呢?
我们使用「border大法」来看一看到底为什么出现了这种情况,我为 <dl>
元素中的所有元素都添加了 border
,并且稍微修改了 <dt>
和 <dd>
的宽度。
dl {
width: 400px;
}
dt, dd {
margin: 0;
padding: 0;
float: left;
width: 49%;
border: 1px solid red;
}
出现的结果是这样的:
想必大家都看到了,定义术语的 <dt>
元素和描述术语的 <dd>
元素的高度不同,因此第二行的邮箱就被挤到了 <dd>
元素本来的位置上,其后的元素也被依次挤了下去。
解决
造成这个问题的原因是 <dt>
和 <dd>
自适应高度,而纯数字的 <dd>
高度要低于汉字内容的 <dt>
,因此有两种方法解决:
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的高度,并且将行高设置为与高度相同,使文本垂直居中。
解决~
如果各位同学还有更好的解决方法,还请不吝赐教。
以上。