dl元素通常用于创建描述列表,但是我在使用过程中发现了一个小问题。定义和使用MDN中对
- 元素的定义是:包含术语定义和描述的列表,通常用于显示术语表或元数据(键值对列表)。
- 和
- ,
- 用于声明定义列表中的术语,
- 用于指定描述列表(
- )元素中术语的描述。
- 姓名
- 哥斯拉
- 出生
- 1952
- 出生地
- 日本
- Color
- Green
- 前莫名出现空白,后面几行就出问题了。这就是为什么?让我们使用“边框方法”来看看为什么会出现这种情况。我给
- 和
- 的宽度。dl{width:400px;}dt,dd{margin:0;填充:0;向左飘浮;宽度:49%;border:1pxsolidred;}出现的结果是这样的:大家一定看到了,定义term
- 元素的高度和描述term的
- 元素不一样,所以第二行的邮箱被推到
- 元素原来的位置,后面的元素也依次被推下。解决这个问题的原因是
- 和
- 的高度是自适应的,纯数字的
- 的高度低于汉字的
- 的高度,所以有两种解决方法:1.由于纯数字的高度与汉字文字的高度不同,所以我们可以在两边加上汉字:完美~合理,我很高兴...2.正常人用不了以上方法,好吗?不要惊慌,还有一种方法:给两边一个固定的高度。dl{width:400px;}dt,dd{字体大小:16px;填充:0;保证金:0;向左飘浮;宽度:49%;边框:1px纯红色;高度:30px;行高:30px;}为两边设置30px的高度,并将行高设置为与高度相同,使文本垂直居中。解决方案~如果大家有更好的解决方案,请告诉我。多于。
- element在上面的显示中,
- 元素有它的默认样式,但我想在我的页面上显示这样的列表:所以,我向
- 列表添加了一些CSS样式:dl{width:400px;边框:1px纯红色;box-sizing:border-box;显示:内联块;}dt,dd{边距:0;填充:0;向左飘浮;width:50%;}由于问题,小Problem:descriptionlist的样式完全乱了。列表第一行貌似没问题,但是第二行
- 元素中的所有元素添加了边框,并稍微修改了
- 元素有两个唯一的子元素,即